Animação explicativa em SaaS: do design de UI ao movimento no After Effects

1. Apresentação: Você fica empolgado assistindo vídeos explicativos do SAS e se pergunta como eles fazem isso? Olá, sou Valerie e, depois criar vários cursos bem-sucedidos, estou muito animada em anunciar que meu curso mais avançado até agora está finalmente pronto E desta vez, você aprenderá a criar um vídeo explicativo premium do SAS do Depois de assistir a mais de 200 explicadores premium do SAS, aceitei o desafio de criar o curso mais completo para criar vídeos explicativos do SAS, desde a compreensão do roteiro e a criação vídeos explicativos do SAS, desde a compreensão do de storyboards até a preparação da sincronização de arquivos Figma com dublagens e a sincronização de arquivos Figma com dublagens aceitei o desafio de criar o curso mais completo para criar vídeos explicativos do SAS, desde a compreensão do roteiro e a criação de storyboards até a preparação da sincronização de arquivos Figma com dublagens e a animação de demonstrações dinâmicas limpas. Não se trata de efeitos chamativos, mas de técnicas e fluxos de trabalho reais usados por Você criará um vídeo explicativo completo do 62º SAS com aparência profissional, suave e que realmente represente os padrões Este não é um curso para iniciantes e inclui 24 aulas aprofundadas Não se preocupe. Você ficará totalmente envolvido desde o primeiro segundo. As explicações detalhadas, os exemplos reais, a orientação pessoal, as perguntas do meio da aula e, é claro, as próprias animações o manterão inspirado e focado durante toda a Ao final do curso, você terá a confiança necessária para assumir qualquer projeto e, melhor ainda, sairá com um projeto final de alta qualidade que poderá mostrar com orgulho como exemplo para Então, se você está pronto para levar suas habilidades de design de movimento para o próximo nível, vá em frente, participe do curso hoje e vamos começar a aprender como criar um vídeo explicativo do SAS como um profissional 2. Boas-vindas do curso e configuração dos arquivos do projeto: Olá, e bem-vindo ao curso. Neste vídeo, quero explicar algumas notas importantes antes de começar as aulas. Em primeiro lugar, não se esqueça da pasta principal do curso, onde você encontrará todos os recursos que usaremos nas aulas. Outra observação muito importante a ser mencionada é que, da lição dois à lição seis, você não precisa acompanhar. Essas lições são mais sobre como explicar algumas etapas iniciais antes da animação, principalmente sobre como preparar todos os arquivos de design antes da fase de animação. Nessas lições, mostrarei como transferir os designs do Figma para o Illustrator e prepará-los para a Então, se você decidir fazer isso junto comigo, salve seus arquivos do Illustrator na pasta AI Quando começarmos a animar o projeto, insisto fortemente que você use meus arquivos preparados, que podem ser encontrados dentro desta pasta Portanto, não importa se você salvou seus próprios arquivos ou não, em qualquer caso, todos usaremos meus arquivos dentro das telas da pasta AE. Quando começarmos a animar, salve seu arquivo de projeto do After Effects dentro da pasta AE, que você pode encontrar na pasta principal do curso que você baixou de mim E quando terminarmos o projeto e iniciarmos o processo de renderização, você salvará seus arquivos na pasta final, que também encontrará na pasta principal do curso E a última coisa que quero mencionar é que todos os links para as coisas que mencionarei durante o curso podem ser encontrados no arquivo PDF chamado tintas Com isso dito, vamos começar. 3. Configuração do Figma e importação do design: Lá. Então, primeiro, vamos começar criando uma nova conta no Figma Ou se você já tiver uma conta, basta fazer login. Caso você não tenha um, você pode criá-lo facilmente fazendo login com sua conta do Gmail Agora, você pode ver coisas diferentes das que eu tenho aqui, e isso porque eu já tenho alguns projetos importados para mostrar algo em um minuto. Por enquanto, vamos clicar no nome do perfil e baixar a versão desktop do Figma Não há grande diferença entre os dois. Eu só prefiro usar o aplicativo em vez do navegador. O processo de instalação é bem simples. Então, quando terminar, abra o aplicativo e agora vamos fazer login na conta usando a versão do navegador. Tudo bem. Então, quando estivermos prontos, vamos examinar as funções básicas que você precisa conhecer como designer de movimento trabalhando com a Figma Primeiro, podemos mudar o tema. Temos três opções principais. Nas configurações, não há nada que realmente precisemos saber. Então, vamos seguir em frente. Agora, quero que você vá para a seção de modelos e ferramentas. Aqui você pode encontrar muitos ativos úteis para usar em seus projetos. Talvez no seu caso, você esteja vendo coisas diferentes das minhas, mas isso não importa. O que importa é que você pode encontrar designs aqui para usar em seus projetos do After Effects. Posteriormente no curso, aprenderemos o método mais simples e gratuito de importar esses designs para o After Effects. Você pode filtrar para ver apenas os ativos gratuitos e, se precisar de designs de interface de usuário específicos, pode usar a barra de pesquisa para encontrar algo de que goste. Tenho certeza de que você ficará surpreso ao descobrir alguns designs de alta qualidade aqui alguns designs de alta qualidade que são totalmente gratuitos. Apenas certifique-se de verificar nas descrições quais designs podem ser usados para fins de marketing e quais são apenas para fins de aprendizagem. Tudo bem. Vou trazer tudo de volta ao normal e vamos seguir em frente. Se você clicar aqui, verá os projetos de equipe em que está trabalhando. Em breve, abordaremos esta seção em profundidade. Nos rascunhos, você verá os arquivos importados de fora Em todos os projetos, você verá os projetos nos quais está realmente trabalhando. E na lixeira, você verá todos os arquivos excluídos, ok? Agora, se voltarmos aos rascunhos, podemos ver que, se quisermos criar um novo design, podemos clicar aqui e fazer isso Mas, no nosso caso, não criaremos um design do zero, é claro. Como designers de movimento, geralmente recebemos um link Figma para o design do cliente ou recebemos um arquivo Figma do No nosso caso, encontrei um design Figma super legal de uma plataforma SAS no site Invoto elements Esse é o nome do designer. Então grite para ele. Há muitos painéis diferentes aqui. Tornando-o um exemplo perfeito de um projeto SAS complexo para praticarmos. Nós o usaremos no curso como se um cliente o tivesse enviado para nós. Então, agora vamos voltar ao Figma e importar esse design para que possamos usá-lo Para fazer isso, primeiro, clique no ícone de adição ao lado da seção de rascunhos e selecione Importar Agora clique em Importar do computador e encontre o FigmaFle em nossa pasta de ativos que você baixou para mim Por fim, entre no site do CRM, na pasta Kit, selecione o FigmaFle e Agora, aguarde alguns segundos até que o design seja carregado na seção de rascunhos. Ótimo. Portanto, importar um arquivo Figma é uma forma de obter o design do cliente, mas existe outra forma por meio do link Figma Se um cliente compartilhar seu design Figma com você usando seu e-mail, você verá uma notificação aqui no ícone de sino De qualquer forma, se você clicar na notificação ou curtir agora, importe o arquivo Figma, basta clicar nele para abri-lo. Tudo bem. Então, agora vamos investigar esse design do FiGMA. Esse design é muito complexo, mas é super organizado. Ao explorá-lo, veremos agora as ações mais comuns que você precisa realizar como designer de movimento ao se preparar para usar os designs no After Effects. Portanto, a primeira coisa que você quer fazer como designer de movimento é garantir que você não esteja trabalhando no projeto compartilhável Isso significa que você não quer interferir com a equipe de design deste projeto. Se você receber o design usando um link compartilhável do Figma , verá aqui outros perfis que podem ser a equipe de design do cliente trabalhando neste Nesse caso, a primeira coisa que eu faria, se eu obtivesse o arquivo usando um link compartilhável ou apenas o arquivo Figma, seria duplicar Dessa forma, eu tenho o original intocado e não vou interferir com a equipe de design que o criou Para isso, vamos fechar o projeto e duplicá-lo na seção de rascunho Clique com o botão direito e selecione Duplicar. Agora, para ter certeza que é no design que vou trabalhar, adicionarei meu nome ao nome do projeto. E para que só eu possa mexer nesse projeto, vou transferi-lo para os projetos da minha equipe pessoal, que encontrarei na seção Todos os projetos Agora podemos acessar nossos projetos e abrir o design duplicado Incrível. Agora, você não verá nenhum outro perfil próximo ao seu perfil no canto superior direito. Ótimo. Então, vamos começar a explorar esse projeto Figma Como você deve entender, cada projeto Figma pode ter uma aparência diferente de outro, como os projetos do After Effects, todos parecem diferentes dependendo de quem os projetou. Meu objetivo aqui é que você se familiarize com o layout básico do Figma, para que possa navegar pelos projetos do Figma que recebe de um cliente E esse design é um ótimo exemplo porque, como eu já disse, é super complexo e inclui muitos elementos de design. Então, primeiro de tudo, em cada projeto Figma, haverá uma seção de páginas e uma seção de camadas Basicamente, nós, como designers de movimento, devemos preocupar com o painel esquerdo do Figma Não se deixe intimidar pelo lado direito. Essa não é uma área que precisamos tocar ou mudar. A seção de camadas mudará acordo com a página que selecionarmos. Por enquanto, selecionamos a capa e, portanto, estamos vendo as camadas dessa página específica. Se você estiver trabalhando com um bom cliente, geralmente obterá todas as diretrizes de design no arquivo Figma Portanto, tente procurá-los primeiro ao abrir o arquivo. Não os tenha, fique à vontade para pedir um PDF ou outro arquivo com as diretrizes da empresa, se houver. Ok, agora, como eu disse anteriormente, a seção de camadas muda. De acordo com o projeto, estamos selecionando na seção de páginas. Como você pode ver, cada vez que seleciono um design de página diferente, obtenho uma estrutura de camadas diferente. É assim que o FIGMA funciona. Outra coisa que você precisa saber é que você pode mover a linha que separa as páginas nas seções de camadas Como você pode ver, temos muitas outras páginas dentro desse arquivo SIGMA Na maioria das vezes, você encontrará aqui todos os ativos que a equipe de design usa para criar seus painéis de plataforma SAS e todos os designs de interface do usuário da plataforma. Portanto, caso você não consiga encontrar os designs reais do SasuiPanel, pergunte ao cliente em qual página ele está ou simplesmente pesquise uma página referente ao Como neste exemplo, podemos ver isso se clicarmos na página de design do site. Então, vamos clicar nele e ajustar o painel para que possamos ver todas as camadas desta página. Você pode mover a linha ou simplesmente clicar no nome da página para fechar essa seção. Agora, podemos ver todos os designs do painel de interface do usuário da plataforma SAS do cliente. Como eu já disse, é um projeto muito complexo com muitos painéis de interface de usuário, e nem sempre você terá esse tipo de grande projeto. Mas é uma boa chance de praticarmos esse tipo de projeto, para praticarmos esse tipo de projeto, que você possa estar pronto para qualquer arquivo Figma mais tarde em sua jornada É um projeto bem organizado e, se você abrir as camadas de um painel, verá as subcamadas que criam esse painel específico É assim que um bom arquivo de design Figma deve ser estruturado. Mas você deve saber que mais estruturado que seja o projeto, às vezes você pode encontrar pequenos problemas no design. Deixe-me voltar ao meu painel e mostrar o que quero dizer. Por enquanto, não faça nada. Apenas assista e ouça. Vou ver os rascunhos e inserir outro kit de interface de usuário que baixei da Internet Pode facilmente ser um design que recebi de um cliente. Então, aqui, a estrutura do design é um pouco diferente. Nas páginas, há uma versão escura do design de uma plataforma. Mas o mais importante, se eu ampliar este painel, podemos ver que há um pequeno erro aqui. Nesse caso, basta clicar duas vezes nas camadas até chegar à correta, semelhante ao que fazemos no Illustrator Então eu posso movê-lo e agora vejo que há dois objetos que eu posso excluir depois disso. Vou trazer essa forma de volta à sua posição original. Ótimo. Agora, quero mostrar outro exemplo de um projeto de design Figma O que eu quero que você veja neste é que às vezes você pode obter um design com diferentes tamanhos de painel, como você pode ver aqui. Além disso, há situações em que você terá um design escuro e um brilhante lado a lado. Estou mostrando tudo isso, para que você se familiarize com as diferentes estruturas do projeto Figma Tudo bem. Agora vou voltar ao nosso design e vamos trabalhar juntos. Primeiro, quero que você se acostume a aumentar e diminuir o zoom e a percorrer o design Mantenha pressionado o controle ou o comando no Mac e role a roda do mouse para ampliar e se movimentar, semelhante ao software da Adobe, segure a barra de espaço e arraste a tela. Como você pode ver, temos muitos designs de painéis aqui e não vamos usar todos eles, é claro. Usaremos somente aqueles que são relevantes para o nosso projeto. O que eu quero que você note é que mesmo nesse design muito organizado, ainda podemos encontrar alguns pequenos problemas de design. Preste atenção nesta área onde vemos a flecha. Aqui, parece bom. Mas se optarmos por outro design de painel, podemos ver claramente que essa camada não está no lugar certo na pilha de camadas Como esse erro se repete em muitos painéis, não o corrigiremos aqui Vamos corrigi-lo posteriormente no processo de importação para o After Effects Mas antes disso, precisamos saber exatamente quais painéis do design usaremos. Isso é o que faremos na próxima lição. Vai ser uma boa. Então nos vemos lá. 4. Leia o roteiro e planeje o storyboard: Volte. Nesta lição, quero que você não faça nada, apenas observe e aprenda. Agora, depois de abrir o design infigma, precisamos começar a entender quais painéis devemos usar em nossos projetos de After E essa deve ser sua próxima preocupação ao trabalhar em um vídeo SAS complexo. O melhor recurso para isso sempre será o roteiro. Pode ser um script que recebemos de um cliente ou um script que criamos nós mesmos. De qualquer forma, o script é a fonte número um a ser investigada a seguir. No nosso caso, vamos imaginar que recebemos o script do cliente. Neste ponto do meu processo de criação de um vídeo SAS, geralmente começo a criar o storyboard Na maioria dos casos, é um pouco mais simples de criar do que criar um storyboard para um vídeo explicativo comum Isso porque em muitas cenas nos vídeos do SAS, precisamos mostrar animações de grandes títulos e a animação dos painéis de interface do usuário do software Na minha opinião, isso é mais fácil do que criar conceitos visuais complexos, como geralmente precisamos para vídeos explicativos. Primeiro, vamos entender a estrutura principal de quase todos os scripts. Seja para um SAS ou para um vídeo explicativo normal. Isso ajudará você na criação do storyboard. Normalmente, teremos quatro partes principais no roteiro, a apresentação do problema, a introdução da empresa, como a empresa resolve o problema, o plano de ação Essas são as partes principais do script e, a partir daqui, às vezes podemos adicionar subpartes adicionais entre elas. Por exemplo, entre a primeira e a segunda parte, podemos adicionar pontos adicionais que mostram como o problema pode arruinar áreas mais específicas da vida do público, geralmente três pontos E entre a terceira e a quarta partes, podemos adicionar benefícios adicionais, geralmente também três, sobre como a empresa pode melhorar a vida do público. Tudo bem. Agora que temos isso, vamos dar uma olhada no nosso roteiro e eu vou mostrar como eu criei o storyboard Em primeiro lugar, você precisa entender que, para criar bons storyboards, você precisa gerar ideias visuais para o texto do script E para fazer isso, você deve assistir a muitos exemplos e vídeos semelhantes ao que você precisa criar. Vou anexar um link para uma playlist com alguns vídeos explicativos legais do Sas para que você possa começar Ao longo do curso, mostrarei como uso esses vídeos para gerar ideias para muitas das cenas do nosso projeto. Eu sempre digo que o melhor método de geração de ideias é observar muitas referências on-line, não apenas quando você está trabalhando em projetos, mas também no seu tempo livre. Você precisa entender que, se quiser levar sua carreira a sério, precisa começar a pensar como um designer de movimento. E quando você assiste a muitos vídeos de design de movimento, lentamente começa a memorizar cenas e animações que podem ser usadas posteriormente em seus Dessa forma, ao ler seu próximo roteiro ou criar um para si mesmo, você já pode começar a imaginar quais cenas se encaixarão visualmente no roteiro Existem maneiras ilimitadas de apresentar um script visualmente, e esse processo pode ser alterado por você ou por seu cliente. É por isso que criar um storyboard é tão importante. Isso dá a você e ao cliente uma ideia clara do que esperar e economiza muito tempo ao evitar revisões desnecessárias Observe que às vezes mudamos um pouco as ideias durante a fase de animação, mas não de forma muito drástica Portanto, se você acha que, na fase de animação, deseja mudar algo que não combina perfeitamente com sua ideia inicial de storyboard, certifique-se de que a mudança seja quase imperceptível e não seja muito complicada Tudo bem. Então, agora vou guiá-lo pelo meu processo de geração de ideias visuais para esse roteiro. Para o texto de abertura, apresentando o problema principal, quero começar com uma animação de texto simples porque vi que muitos outros vídeos começam assim , e está tudo bem. Para apimentar um pouco a cena, decidi brincar com a palavra múltiplo e enfatizar seu significado visualmente, dando-lhe uma sensação desorganizada e confusa, criando uma animação caótica para os Finalizar com um objeto cursor ajuda o espectador a seguir para a próxima cena. Então, no próximo parágrafo, continuando a apresentar o resultado do problema principal, quero mostrar muitas tarefas e mensagens na cena antes que o cursor se mova para baixo, talvez em um mar escuro, onde temos um formulário de pesquisa no estilo de site, indicando que o personagem está começando a procurar ajuda on-line. Em seguida, depois de apresentar os problemas, é hora da introdução da plataforma SAS que ajudará a melhorar a situação. Como vi em quase todos os vídeos de referência, esse é o momento de uma boa animação de logotipo, seguida pelo painel principal da plataforma SAS. Sempre que você quiser apresentar um painel de interface de usuário, é uma ótima ideia consultar o cliente e perguntar o que ele prefere mostrar. Isso se aplica a todas as cenas em que os painéis de interface do usuário são apresentados. Neste roteiro, também temos um aspecto engraçado que diz que é tão simples que até um gato pode fazer isso. Então eu decidi apresentar um meme de um gato engraçado nessa cena Nesse ponto, começamos a apresentar as soluções para o problema principal. Nos vídeos do SAS, isso geralmente é mostrado demonstrando um fluxo de trabalho da plataforma Ele pode ser apresentado em três métodos principais usando gráficos baseados em vetores, que é o que usaremos neste curso. Podemos escalá-los e ainda obter um resultado premium, mas precisamos ter os arquivos de design originais. Usando gravações de tela, isso não requer arquivos de design originais, mas grava a plataforma real Isso pode economizar muito tempo, mas a qualidade da filmagem é muito limitada Usando gráficos representativos, em vez de mostrar o design real, criamos algo que reflete a ideia original. Isso é especialmente útil para clientes que ainda não têm uma versão final da interface do usuário ou que desejam se concentrar apenas em um recurso específico da plataforma SAS. De volta ao roteiro. Nesse ponto, depois de ver uma referência interessante, decidi que, antes de entrar em um painel específico, quero apresentar tudo de uma vez em um visual dinâmico em três D. Em seguida, verifiquei com o cliente quais telas eles queriam que eu mostrasse e anotei os nomes dos painéis por mim mesmo, para que eu pudesse encontrá-los facilmente no design do Figma antes de importá-los para o After Effects Então temos uma pergunta no roteiro. Percebi que esse padrão se repete, então decidi que a pergunta seria apresentada no mesmo estilo visual e de movimento E, mais uma vez, fiz questão de usar o painel de interface de usuário relevante. Em seguida, o processo é praticamente o mesmo da cena anterior. Mas desta vez, eu queria apresentar o painel de interface de usuário relevante de uma forma mais interessante. Depois de ver um exemplo interessante de uma referência de design de interface de usuário muito semelhante, decidi apresentá-la da mesma forma que na referência. Para o próximo parágrafo, o processo é o mesmo. Só quero mencionar que, neste momento, ao criar o storyboard, estou observando para mim mesmo quais painéis de interface do usuário devem ser relevantes E eu já sei em minha mente que, nessa cena, posso adicionar algumas animações de zoom em partes específicas de um painel de interface Mas se você acha que seu cliente não confia totalmente em seu processo , sugiro também adicionar esses quadros extras ao storyboard Dessa forma, nenhuma pergunta ficará sem resposta sobre a aparência da cena Agora, neste ponto, onde temos a parte de compartilhamento de arquivos, você pode perceber que não há nenhum texto acompanhando essa cena, e esse é outro ponto importante com o qual você deve saber como lidar Para decidir quando adicionar texto e quando não, é melhor consultar o cliente. Às vezes, eles querem que certas frases mostradas e outras vezes são menos importantes. Portanto, certifique-se de alinhar essa peça com o cliente. Basta perguntar a eles quais frases do roteiro eles querem que sejam apresentadas no vídeo. Tudo bem. Agora, para a parte final, decidi terminar o vídeo com a mesma animação de texto com a qual começamos. Isso porque a palavra luta também se encaixa nas letras desorganizadas, animação que fizemos para a palavra múltiplo Em seguida, precisamos finalizar com uma cena de call to action, onde, na maioria dos casos, apresentaremos o logotipo e o site da empresa ou qualquer outra chamada à ação solicitada pelo cliente. Por exemplo, poderia ser Met us in LA. Clique abaixo para entrar na lista de espera, etc. Então, com isso, terminamos a lição e estamos prontos para finalmente aprender como importar os designs do Figma para o After Effects Faremos isso na próxima lição. Vai ser uma ótima. Nos vemos lá. 5. Importando painéis de UI do Figma para o After Effects: Eu volto. Nesta aula, nós vamos aprender como importar os painéis de interface do Figma para o After Effects Conheço cinco maneiras principais de fazer esse trabalho. Você pode ver todos eles agora na tela. Podemos fazer isso usando extensões ou usando as funções nativas do Figma A diferença é que, ao usar extensões, a transferência acontece diretamente do Figma para o After Effects Ao usar as funções nativas do Figma, primeiro precisamos importar o design para o Illustrator e depois trazê-lo para o After Vamos começar com a lista de extensões. Não vou me aprofundar em todos os métodos porque não quero que esse curso dure mais de 50 horas. Em vez disso, anexarei links para os melhores tutoriais de cada extensão, na pasta de ativos ou abaixo do vídeo na descrição O primeiro é o AEUX. É uma extensão gratuita, mas cria muitos problemas durante o processo de importação, especialmente com camadas de texto, efeitos e valores de posição no design O próximo é o Convertify. Você pode usá-lo com uma assinatura mensal, mas também deve ter Adobe XD instalado em seu computador. Depois, temos o overlord, que atualmente é a melhor opção, acordo com muitos designers de movimento É uma extensão paga e a maneira direta mais rápida de importar camadas Figma para o After Effects sem passar pelo Illustrator, que abordaremos nos próximos métodos Saiba que mesmo com o overlord, ainda existem alguns problemas que precisam ser ajustados após a importação das camadas do Figma para o Não é 100% perfeito. Como a maioria dos meus alunos são designers de movimento iniciantes sem muito dinheiro para investir em extensões pagas, decidi neste curso usar o método de função Figma nativo A primeira opção é usar a função de exportação. Sei que há muito mais a ser abordado sobre essa função, mas, novamente, quero que comecemos com animação e não percamos muito tempo explorando o FiGMA O objetivo deste curso não é aprender todas as funções do Figma, mas aprender apenas as funções de que precisamos como designers de movimento para criar um ótimo vídeo explicativo do SAS Ao final deste curso, quero que você se sinta confiante o suficiente para pegar um arquivo FiGMA de um cliente e, mesmo sem conhecer o Figma em profundidade, ainda ser capaz de criar um ótimo vídeo explicativo do SAS Tudo bem. Então, agora vamos falar sobre o método final. Neste curso, usaremos esse método, que é simplesmente copiar as camadas do Figma formato SVG e colá-las no Illustrator Lá, podemos dividir as camadas e organizar o design para atender às nossas necessidades no After Effects. Então, agora eu quero que você pegue o mouse e finalmente comece a trabalhar comigo. A primeira coisa que precisamos fazer é abrir o Adobe Illustrator. Então, vamos fazer isso bem rápido. Agora, precisamos criar um novo arquivo. Então, vamos clicar aqui. Para o tipo de documento, geralmente opto pelos modelos da web, e aqui podemos escolher o grande que tem dimensões de resolução full HD. Em seguida, precisamos pensar em um nome para esse arquivo. E isso é muito importante porque queremos lembrar qual painel de interface do usuário é. Assim, podemos começar o nome com o painel ou a tela um. Em seguida, adicione um sufixo com o nome do painel em que estamos trabalhando Nesse caso, de acordo com nosso storyboard, o primeiro painel que precisa ser exibido é o painel Em breve, escolheremos qual deles especificamente. Por enquanto, vamos escrever o painel aqui no nome. Depois, podemos deixar toda a configuração como está e clicar em Criar. E agora, antes de prosseguir, quero que configuremos o mesmo layout de painel. Então, vamos para Window, Workspace e configurá-lo como Essentials Classic Caso você tenha movido alguns painéis nesse layout no passado, certifique-se de redefinir o layout. Agora, vamos melhorá-lo um pouco arrastando a guia de camadas para a área aberta à direita aqui Será muito mais conveniente para nós quando começarmos a trabalhar com todas as camadas em apenas um minuto. Ótimo. Agora estamos prontos para voltar ao Figma e importar nosso primeiro painel ou tela Neste curso, vou chamá-los de telas. Como já mencionei anteriormente, precisamos escolher um dos designs da tela do painel. Para saber qual tela usar, você pode perguntar ao cliente o que ele prefere. Obviamente, essa decisão também pode ser tomada no início do processo durante a criação do storyboard Tudo bem, então digamos que queremos esse. Como você pode ver, quando clico no nome desse design, o InfigMat é chamado de É como uma prancheta e um Illustrator. Quando clico nele, posso ver que está selecionado na guia de camadas à esquerda, abaixo da seção do painel. Você pode abrir as camadas e todas as subcamadas para ver o quão complexo é esse design No nosso caso, queremos todas as camadas relacionadas a esse quadro. Assim, podemos selecionar todas as camadas manualmente ou simplesmente clicar no nome do quadro. Em seguida, clique com o botão direito, vá para Copy Paste Says e escolha SVG. SVG é um formato baseado em vetores que pode ser facilmente aberto no Illustrator porque o Illustrator é um software baseado em vetores OK. Então, agora vamos voltar ao Illustrator e simplesmente pressionar Control ou Command no Mac plus V para colar o design copiado Simples assim. Uma coisa que você precisa saber sobre esse método é que, se o design do Figma tiver efeitos como desfoque, sombra projetada ou outras sobreposições complexas, eles não Nesse caso, você pode recriar os efeitos no Illustrator ou, na minha opinião, a melhor opção, recriá-los posteriormente no Observe também que todas as camadas de texto não são mais texto editável Agora são formas. Todos esses problemas também se aplicam à maioria das extensões pagas. Eu disse que, independentemente do método usado, você sempre precisará ajustar algumas pequenas coisas ao longo do caminho. Talvez, no futuro, haja maneiras melhores. Tudo bem, de volta ao design. Nos casos em que o design é maior ou menor do que a tela do Illustrator, sugiro que, enquanto o design estiver agrupado, certifique-se de que as proporções restritas ativadas e, em seguida, redimensione o tamanho manualmente a partir Dessa forma, seu design será dimensionado proporcionalmente e se encaixará adequadamente. No nosso caso, ele se encaixa perfeitamente na tela , então estamos prontos para prosseguir com a separação das camadas Então, primeiro, precisamos liberar a máscara de recorte para que possamos desagrupar as camadas Em seguida, clique em algum lugar externo para desmarcar o design e selecioná-lo novamente, ou simplesmente clique com o botão direito do mouse e desagrupe-o Nosso objetivo é desagrupar todas as camadas, para que possamos decidir quais seções precisam permanecer agrupadas e quais Em seguida, precisamos separar todas as camadas não agrupadas em camadas individuais Para isso, enquanto a camada principal estiver selecionada, abra o menu de camadas e selecione liberar para a sequência de camadas. Agora podemos ver todas as camadas desse design. Não se deixe intimidar pelo número de camadas. Não vai ficar assim. Em seguida, precisamos movê-los todos para fora da camada principal. Para fazer isso, selecione a primeira subcamada, role para baixo, mantenha pressionada a tecla shift e selecione a última Agora, arraste todos eles para fora da camada principal. Isso nos permitirá preparar o design para animação. Depois disso, podemos excluir a camada vazia abaixo. Eu sei que é uma camada vazia porque não há nenhum ícone de seta ao lado dela. Ótimo. Nossa próxima etapa é preparar as camadas para animação. O que quero dizer com isso é garantir que agrupemos camadas que não precisam permanecer separadas porque não as animaremos E como sabemos o que vamos animar e outros enfeites? É por isso que criamos o storyboard. Por exemplo, nesta cena, não precisamos animar nenhuma das camadas Mas caso um cliente nos pergunte ou decidamos que queremos animar algumas das partes aqui, vamos revisar o design e começar a organizá-lo enquanto planejamos o que podemos animar mais tarde, se Ok, então, neste momento, eu primeiro me certifico de bloquear a camada de fundo para que eu possa selecionar facilmente as outras camadas no design. Agora, vou tentar selecionar os objetos que acho que deveriam ser agrupados porque tenho certeza de que não vou animá-los Como você pode ver, algumas outras camadas também estão sendo selecionadas. Essas são formas usadas como máscaras de recorte. Vamos selecionar um. E aqui podemos ver que está sob nossa camada de fundo. Podemos desligá-lo, bloqueá-lo ou excluí-lo porque não precisamos dele aqui. Tudo bem. Então, agora vamos começar a agrupar os objetos Temos certeza de que não vamos animar, começando pela área superior, neste caso Eu sei que no storyboard, eu tenho uma cena na barra de pesquisa, então vou me certificar de não agrupar os objetos que criam a barra de pesquisa junto com o resto da área superior Então, vamos selecionar todos os objetos aqui, tomando cuidado para não selecionar a barra de pesquisa e depois agrupá-los. Agora, esse grupo está em uma camada e foi movido para cima na lista de camadas. Vamos desligá-lo por enquanto. Em seguida, podemos agrupar essa área aqui porque eu sei que não vou animá-la e que não haverá necessidade de mudanças nessa área no design ou na animação Vamos agrupá-los usando o atalho Ctrl ou Command no Mac plus G. Podemos encontrar essa camada de grupo aqui Você pode colocá-la abaixo da primeira camada do grupo, se quiser. E vamos desligá-lo por enquanto, que possamos nos concentrar na barra de pesquisa. Para a barra de pesquisa, estou planejando animar o ícone da lupa e manipular a busca por palavras posteriormente na Então, vou me certificar de não agrupá-los completamente. Para facilitar isso, vamos desativar a camada branca de pesquisa. Vejo que é construído a partir de duas camadas, uma para o preenchimento branco e outra para o traçado cinza. Vamos lidar com isso em um segundo. Por enquanto, vamos agrupar todas as formas que criam o ícone da lupa Como você pode ver, essas formas estão em camadas separadas, o que é desnecessário. Podemos tê-los em uma camada. Então, selecione-os e agrupe-os usando o atalho. Em seguida, vamos verificar se a palavra de pesquisa está em uma camada. Isso é. Isso significa que podemos deixar como está. Então vamos ver o que está acontecendo com o ícone do ponto de exclamação Todas as formas estão em camadas separadas, e não queremos isso. Então, vamos agrupá-los todos juntos. Tudo bem, então com isso, terminamos com a área superior Agora vamos lidar com a área abaixo dela. Mas antes disso, agora podemos trazer de volta todas as camadas desativadas e aproximá-las umas das outras no painel de camadas. Mas, para ser honesto, não precisamos fazer isso agora. Posteriormente, depois de terminarmos de agrupar todas as camadas necessárias, organizaremos o painel de camadas de qualquer maneira, certo? E agora vamos voltar a agrupar as camadas na seção UI abaixo da barra de pesquisa Novamente, nesse caso, precisamos pensar se queremos animar algo aqui ou não Talvez precisemos animar a linha aqui ou os números. Essa é basicamente a lógica por trás da preparação do design para animação. E mesmo que você use extensões pagas e pule a etapa do Illustrator, ainda precisará ajustar algumas camadas e pré-composições dentro do After Effects Mas a boa notícia é que é muito improvável que você receba um design tão complexo que precise animar tantos painéis Estamos fazendo isso no curso porque quero que você repita essas ações para se acostumar com elas o mais rápido possível. E não se preocupe se você acha que precisa preparar todos os painéis Figma para este curso no Illustrator Na pasta principal do curso, você encontra todos os arquivos do Illustrator já preparados para animação Eu só quero que você pratique isso uma vez comigo. Então você pode usar meus arquivos prontos. Tudo bem, de volta à aula. Aqui, decidi que quero que todas as camadas sejam separadas porque eu poderia animá-las no futuro. Mas eu quero ter certeza de que os objetos que criam o ícone de seta estão em uma camada. Para isso, vamos bloquear a caixa branca para que possamos selecionar as formas das setas e agrupá-las. Vamos fazer o mesmo com o resto das caixas. Ótimo. Feito isso, vamos passar para a próxima parte. Primeiro, vamos bloquear a forma branca para que possamos selecionar os objetos aqui facilmente. Agora vamos selecionar o ícone do calendário e, como você pode ver, ele está espalhado por várias camadas, então seria melhor agrupá-lo em uma camada. Em seguida, vamos garantir que os botões em seu texto também estejam agrupados um por um Para essa palavra, podemos deixá-la , pois ela já está agrupada em uma camada Incrível. Agora, vamos lidar com essa parte. Como você pode ver, todas essas camadas estão agrupadas agora, mas acho uma boa ideia separar essa pequena caixa porque podemos animá-la no futuro Então, primeiro, vamos liberar a máscara de recorte desse grupo clicar em outro lugar para desmarcar e desagrupar Ótimo. Em seguida, podemos tentar selecionar a forma da máscara de recorte e excluí-la Neste ponto, podemos ampliar e garantir que as camadas aqui estejam separadas da maneira que quisermos. Por exemplo, vejo que essa caixa está agrupada, mas talvez eu precise animar os números aqui, o que significa que preciso que os objetos dentro dela sejam separados Desta vez, vamos espalhar as camadas agrupadas aqui sem desagrupar a pilha e ver o Às vezes, podemos cometer esses pequenos erros. Então, eu quero que você saiba o que esperar quando isso acontecer. Então, enquanto a camada que contém esse grupo é selecionada, vamos abrir o menu e clicar em Liberar para sequência de camadas. Agora vamos mover todas as camadas para fora da camada principal. E como você pode ver, parece que só tiramos o pequeno ponto roxo do grupo. O resto da pilha ainda está agrupado. Nesse caso, como eu só preciso que a camada numérica seja separada, posso clicar duas vezes nessa pilha até alcançá-la pressionar ControlX para cortá-la Em seguida, clicarei na pequena caixa branca para ver onde ela está no painel de camadas, criarei uma nova camada acima desta e pressionarei Control Shift V para colá-la no mesmo lugar. Tudo bem. Seguindo em frente. Agora, vamos ver o que temos aqui. Acho que podemos deixar o gráfico como está, mas para os nomes dos meses abaixo, acho melhor agrupá-los , pois acho que não vou animar essa parte E vamos também agrupar o ponto vermelho com seu texto e fazer o mesmo com o azul. Incrível. Agora podemos passar para a próxima parte. Vamos ver o que temos aqui na área de Pie. Vejo que temos algumas máscaras de recorte aqui. Vamos lidar com eles em um segundo. Primeiro, vamos selecionar a caixa branca e bloqueá-la. Assim, podemos selecionar o resto dos objetos nesta parte com mais facilidade. Agora, vamos começar a agrupar as partes óbvias, como as formas dos ícones do calendário, os botões e seus textos Também podemos ampliar aqui e agrupar os pontos e seu texto, porque acho que não vamos animar essas Vamos selecionar os números aqui e observá-los no painel Camadas para garantir que o ícone USD e o número já estejam agrupados. Ótimo. Agora podemos seguir em frente para lidar com o Pi. Vejo que o número aqui está em uma camada separada, o que é bom. Mas quando eu seleciono a torta, vejo que ela está agrupada e tem uma forma estranha por trás dela Clique com o botão direito do mouse aqui para ver se é uma máscara de recorte. Como podemos ver, não é uma máscara de recorte. Vamos selecioná-lo e tentar movê-lo. Vejo que é só um retângulo branco. Não precisamos dele no arquivo, então vamos excluí-lo. Ótimo. Agora, para a torta. Vejo que todas as suas partes estão em camadas separadas, o que é útil se você planeja animá-las no After Effects Mas no nosso caso, eu não vou fazer isso. Então, vamos selecionar todos eles. Mantenha pressionada a tecla Shift, clique no número para selecioná-lo e agrupar somente as camadas da torta. Você sempre pode verificar ativando e desativando a nova camada agrupada para confirmar se você agrupou os objetos certos. Parece ótimo. Agora, podemos passar a lidar com a parte do botão aqui. Primeiro, vou bloquear a caixa branca para poder selecionar o resto das formas com facilidade. Agora, vamos agrupar as formas dos ícones do calendário, os botões nas formas dos ícones da lupa Por fim, vamos selecionar a parte inferior para ver o que está acontecendo aqui. Vejo que todas as camadas já estão agrupadas. No meu caso, não quero animar nenhuma das camadas aqui Então, vou deixar como está. Mas caso você precise animar algo aqui, por exemplo, os botões, você precisaria lidar com essa parte de forma diferente Tudo bem. Vamos passar agora para a última parte, que é o painel esquerdo aqui. Se você ampliar a área dos ícones, verá que a forma de cada ícone é colocada em uma camada separada, o que, no nosso caso, é completamente desnecessário. De acordo com o storyboard e o roteiro, não temos nenhuma parte do vídeo em que precisemos animar algo neste painel esquerdo, que é o menu principal dessa plataforma SAS Então, nesse caso, vamos selecionar toda a área aqui, incluindo a pequena seta e a caixa cinza, e agrupá-las todas juntas. Incrível. Agora nós o temos em apenas uma camada. E agora chegamos à parte final da preparação desse arquivo para animação, que é excluir as camadas vazias restantes que temos aqui Você pode identificar claramente uma camada vazia pelo fato de não haver uma pequena seta ao lado dela apontando para a camada. Então, vamos começar a selecionar todas as camadas vazias e excluí-las do painel da camada Em alguns casos, mantenho o controle ou o comando no Mac para selecionar as camadas vazias uma por uma. Em situações em que temos uma camada vazia diretamente após uma não vazia, é melhor selecionar toda a gama de camadas e, enquanto pressiona o controle ou o comando, desmarque as não vazias. Talvez você ache esse método mais conveniente. Infelizmente, não encontrei um atalho ou função que selecione todas as camadas vazias de uma só vez Portanto, se você tentar encontrar um usando IA ou pesquisando on-line, verifique se ele realmente funciona e compartilhe com o resto de nós. Tudo bem, parece que excluímos todas as camadas vazias. Agora podemos desbloquear os bloqueados, se quisermos. Mas o mais importante, vamos dar uma olhada no quadro geral e ver se precisamos de algum ajuste. Vejo que não vemos o nome do painel aqui, que é Painel. Pode não estar na ordem correta na pilha de camadas. Então, vamos encontrá-lo e colocá-lo no lugar certo. Ótimo. Tudo parece bom agora e estamos prontos para salvar o arquivo. Se você quiser me seguir e preparar todos os designs ao longo do curso, entre na pasta AI e salve seu arquivo lá. Mas só para você saber, você pode pular esse processo e, quando começarmos a animar no After Effects, você pode usar meus arquivos já preparados do Illustrator, que podem ser encontrados dentro da pasta chamada telas No meu caso, vou agir como se estivesse fazendo isso pela primeira vez e salvarei esse arquivo aqui. Só precisamos ter certeza de que o nome está correto e que estamos salvando-o como um arquivo do Adobe Illustrator . Em seguida, podemos clicar em Salvar. Podemos deixar todas as opções como estão e clicar em OK. E com isso, terminamos de preparar esse design de interface do usuário. Agora vou preparar o resto dos painéis da interface do usuário para animação. Como eu já disse, você não precisa fazer isso comigo porque você já tem arquivos do Illustrator prontos, mas eu quero que você assista às aulas porque em cada processo de preparação para cada painel, podemos aprender algo que também pode acontecer com você durante esse processo Tudo bem. Então, agora vamos continuar preparando os arquivos Figma para animação usando o Adobe Illustrator De acordo com nosso script, o próximo painel que precisamos usar é um dos painéis na seção do projeto. Então, digamos que depois de confirmar com o cliente, sabemos que essa é a tela que precisamos usar no vídeo Como fizemos na tela anterior, podemos selecionar todas as camadas manualmente ou simplesmente selecionar o quadro inteiro clicando em seu nome. Agora, para copiá-lo para o Illustrator, precisamos clicar com o botão direito do mouse e ir para Copiar e Colar Como E aqui está uma pergunta rápida para você. Em qual formato precisamos copiá-lo? Como queremos que os objetos desse design sejam salvos como arquivos vetoriais, precisamos copiá-los no formato SVG Agora podemos voltar ao Illustrator. E se você estiver acompanhando a aula comigo, precisamos criar um novo documento. Podemos selecionar o arquivo recente que usamos e apenas alterar seu nome para corresponder ao painel de interface ou tela correto em que estamos trabalhando. Vou chamar isso de uma tela de dois projetos. Depois de termos a nova tela, agora podemos pressionar Control ou Command no Mac V para colar o design do Figma Tudo bem, a primeira coisa que precisamos fazer é soltar a máscara de recorte Em seguida, vamos desmarcar o grupo e selecioná-lo novamente para que possamos clicar com o botão direito do mouse e desagrupá-lo Depois disso, enquanto essa camada principal estiver selecionada, abra o menu e escolha liberar para camadas. Isso separará as camadas. Finalmente, vamos selecionar a primeira camada dentro desse grupo, rolar para baixo, segurar a tecla shift e selecionar a última para que possamos movê-las todas para fora da camada principal. Tudo bem. Agora vemos a forma que foi usada como máscara de recorte. Como eu sei que essa é a forma? Posso clicar no pequeno círculo no lado direito dessa camada e a forma será selecionada. Quando eu a movo, vejo que na verdade é apenas uma forma vazia. Então, vamos excluí-lo. Agora estamos prontos para começar a agrupar o resto das camadas de acordo com nossas necessidades e efeitos posteriores Primeiro, podemos selecionar o fundo cinza principal e bloqueá-lo, para que possamos selecionar o restante das camadas com mais facilidade. Vamos começar com a área superior. Vou selecionar essa parte aqui, evitando selecionar o painel esquerdo com os números nos dois botões na dois botões na área superior, porque isso não faz parte da seção do cabeçalho. Agora vou pressionar Control G para agrupá-los. Ótimo. Agora vamos para o menu esquerdo que temos aqui. Como sei que não quero animar essa parte, selecionarei todas as camadas e objetos nesta seção e os agruparei Incrível. Por conveniência, podemos bloquear as camadas agrupadas para que possamos continuar selecionando o restante dos objetos e formas com mais facilidade Vamos agora passar para o menu principal esquerdo. Podemos selecionar todas as formas aqui, certificando-se de incluir a pequena seta e o retângulo cinza atrás dela e agrupá-los todos juntos Ótimo. Agora vamos passar para a parte principal dessa tela de interface do usuário. Quando não tenho certeza do que está acontecendo em uma seção, movo algumas formas e camadas para entender quais seções estão agrupadas e quais são apenas camadas separadas Para começar, vou encontrar a caixa branca e bloqueá-la para poder continuar com esta seção com mais facilidade. Agora, como você pode ver, a seção inteira com as pequenas caixas e ícones está agrupada Então, vamos começar lidando com as camadas. A primeira coisa que vou fazer é clicar com o botão direito do mouse nessa seção e me certificar de liberar qualquer máscara de recorte, se houver uma Depois disso, clico em outro lugar e, em seguida, clico com o botão direito do mouse nesse grupo para desagrupá-lo Em seguida, verificarei se essa camada está selecionada e, em seguida, liberarei todas as camadas em camadas separadas. Finalmente, moverei todas as subcamadas separadas para fora da camada principal Agora vejo que a forma usada para a máscara de recorte permanece aqui e não preciso dela no meu design Então, vou selecioná-lo e excluí-lo. Antes de prosseguirmos, quero mencionar, mais uma vez, por que é tão importante analisar constantemente diferentes referências e exemplos de vídeos semelhantes. Como eu já estudei muitos exemplos, quando olhei esse painel de interface do usuário, lembrei-me imediatamente de ter visto um design muito semelhante em um dos vídeos de referência que me deu a ideia animar esta seção da mesma forma que vi na referência Agora, no Illustrator, ao preparar esse design, sei que preciso agrupar cada uma das pequenas seções aqui como seu próprio grupo Dessa forma, no After Effects, será muito mais fácil animá-los conforme imaginei a partir da referência Então, agora vamos selecionar cada pequena seção e agrupar todas as formas, textos e camadas relacionadas a ela em um grupo. Vamos fazer isso em todas as pequenas seções aqui. Incrível. Agora podemos passar para a parte inferior com os números das páginas. Como sei que não quero animar essa parte de forma alguma, selecionarei todas as formas e camadas aqui e as agruparei todas Ótimo. Agora, posso passar para a parte superior desta seção. Podemos agrupar todas as formas nessa área. Também podemos agrupar o texto e as caixas de botões para cada botão. E, finalmente, podemos selecionar essa longa seção abaixo e agrupá-la. Agora estamos prontos para começar a excluir as camadas vazias. Se quiser, você pode bloquear as camadas não vazias para que elas se destaquem mais claramente enquanto você exclui as vazias. Ao fazer isso, notei que há uma camada que parece não ter nada dentro dela, mas claramente não está vazia. Nesse caso, para entender melhor o que está acontecendo aqui, vou isolar essa camada segurando Alt e clicando uma vez em seu ícone Isso desativará todas as outras camadas e deixará apenas essa visível. Tudo bem, então eu vejo que é algum tipo de linha que não tem propósito no design. Se eu não tiver certeza, posso ativar todas as camadas novamente para verificar se elas são importantes para o design. Mas se eu tiver certeza de que não preciso dele, vamos excluí-lo. Agora, estamos completamente prontos para começar a selecionar as camadas vazias e excluí-las desta vez Vamos usar o segundo método com as camadas não vazias enquanto mantemos o controle. Uma observação rápida se, após selecionar todas as camadas relevantes e clicar em Excluir, você receber uma mensagem de aviso, isso geralmente significa que você incluiu acidentalmente uma camada que não está vazia Nesse caso, sugiro que você não exclua ainda, revise sua seleção, verifique cuidadosamente novamente e desmarque a camada que contém os elementos de design Incrível. Agora, restam apenas as camadas relevantes no arquivo. Podemos desbloquear todos eles e salvar o arquivo. Mais uma vez, verifique se o nome está correto e se você o está salvando como um arquivo do Illustrator Em seguida, clique em Salvar. Com isso, terminamos esta lição e estamos prontos para passar para a próxima. Nos vemos lá. 6. Como preparar o painel de UI de projetos no Illustrator: Estou de volta Agora, vamos continuar preparando o próximo painel de interface do nosso storyboard De acordo com a sequência, o próximo é o painel de interface do usuário do projeto. Então, vamos voltar ao arquivo Figma e copiar a moldura que precisamos De volta ao Illustrator, vamos criar um novo documento. Vou me certificar de dar a esse novo arquivo o nome correto e clicar em Criar. Agora, vamos colar o design. Como você pode notar, esse design é um pouco mais alto que os anteriores, mas tudo Isso não interfere no nosso trabalho. O processo será praticamente o mesmo. Primeiro, soltarei a máscara de recorte depois desagruparei o design Depois disso, separarei todas as camadas em camadas individuais. Em seguida, retirarei todas as camadas da camada principal e, depois disso, bloquearei a camada de fundo. E exclua a forma que foi usada para a máscara de recorte. Agora, como você pode ver, há um pequeno erro de organização de camadas aqui, que na verdade também aparece no design original do Figma Para nós do Illustrator, isso não é grande coisa. Tudo o que precisamos fazer é selecionar todas as camadas e formas nesta seção, incluindo a seta e o pequeno quadrado cinza, e agrupá-las. Posteriormente, colocaremos esse grupo no local correto na pilha de camadas Por enquanto, vamos continuar nos concentrando em agrupar as próximas seções Feito isso, vamos agrupar a área do cabeçalho. A seguir, vamos lidar com a seção principal desse design de interface do usuário. Primeiro, selecionarei a caixa branca e a bloquearei para poder selecionar facilmente as camadas e formas que quero agrupar nesta seção. Agora, vou começar a agrupar todas as formas e textos relevantes Depois disso, vou agrupar todos os botões aqui em um grupo, pois não preciso de cada botão separado. Acho que não vou animá-los individualmente no After Effects Por fim, vamos também agrupar essa área aqui. E agora vamos falar sobre essa parte. De acordo com nosso storyboard, precisamos apresentar algum tipo de fluxo de software de demonstração aqui Acho que vou criar uma animação para a caixa de seleção. Ou seja, quero animar um cursor que ativará esse ícone de marca de seleção verde Nesse caso, primeiro excluirei um dos ícones de marca de seleção Depois, vou garantir que todos os painéis de interface do usuário aqui tenham a mesma aparência e separarei a marca de seleção restante e a caixa verde em suas próprias camadas para que eu possa animá-los Vejo que o ícone V preto e a pequena caixa verde já estão separados em uma camada separada. Então, a última coisa que vou fazer é colorir o traço verde aqui em cinza. Feito isso, começarei a agrupar cada seção aqui, uma por uma Cada tarefa deve estar em sua própria camada. Apenas certifique-se de não incluir a marca de seleção e a caixa verde nesses grupos Obviamente, se você precisar adicionar fotos de pessoas posteriormente, não deverá agrupar tudo. Você manteria o ícone do Avatar em uma camada separada. Não se preocupe Vamos praticar isso nas próximas lições. Por enquanto, vamos terminar de agrupar todas as caixas de tarefas que temos aqui Ótimo. Quando terminarmos com isso, estamos prontos para começar a excluir as camadas vazias no painel de camadas Vou acelerar esse processo um pouco por enquanto. Tudo bem Então, quando terminarmos de excluir todas as camadas vazias, podemos mover a camada com o menu esquerdo um pouco mais para cima na pilha de camadas para que possamos ver todos os detalhes do design corretamente Ótimo. Agora, tudo parece perfeito. Com isso, podemos prosseguir e salvar o arquivo. Verifique se o nome está correto e clique em Salvar. Incrível. Agora vamos voltar ao Figma e preparar a próxima tela da interface De acordo com nosso storyboard, nesta parte, também precisamos criar uma pequena animação de demonstração em que vemos um painel pop-up aparecer no centro da tela Então, vou até Figma e encontro a moldura que preciso copiar para o Illustrator Digamos que, depois de confirmar com o cliente, sabemos que essa é a página que precisamos Como de costume, copiarei esse quadro no formato SVG e, em seguida, no Illustrator, criarei um novo documento e darei a ele o nome correto Agora, quando colo o design da Figma na minha nova tela, a primeira coisa que faço é soltar a máscara de recorte Não me importo de ter uma forma grande aqui. Eu posso lidar com isso mais tarde. O que é mais importante para mim mostrar é que é muito difícil separar a interface pop-up do painel principal. Mesmo se eu desagrupar o design, ainda é difícil selecionar apenas as camadas pop-up porque eu posso pegar acidentalmente formas ou camadas desnecessárias atrás delas. Então, vamos deletar tudo por um momento e eu vou te mostrar a maneira certa de fazer isso. Quando temos um pop-up na parte superior do mainframe, é melhor primeiro selecionar apenas o infigma pop-up clicando diretamente nele ou selecionando-o no painel Camadas à esquerda Em seguida, copie apenas essa parte para o Illustrator primeiro. Depois de colá-lo no Illustrator, podemos movê-lo para o lado por enquanto Agora, de volta ao Figma, vamos ocultar o pop-up e copiar o quadro principal separadamente no Illustrator No Illustrator, crie uma nova camada e cole a moldura copiada nela Certifique-se de alinhá-lo ao centro da tela. Dessa forma, podemos preparar facilmente o painel principal da interface do usuário e , posteriormente, organizaremos a seção pop-up. Tudo bem, enquanto essa camada principal estiver selecionada, abra o menu e escolha liberar para camadas Finalmente, vamos selecionar a primeira camada dentro desse grupo e selecionar a última para que possamos movê-las todas para fora da camada principal. Tudo bem, como você pode ver, há um retângulo escuro atrás do pop-up Não vou excluir a forma porque, no After Effects, posso animá-la com um simples fade in quando o pop-up aparece Para facilitar a localização posterior, renomearei essa camada para sombra Incrível. Agora vamos seguir em frente e ajustar a forma grande que temos aqui. Incrível. Vamos bloquear a camada de fundo antes de prosseguir. Agora, como sempre, a primeira etapa é excluir a forma que foi usada como máscara de recorte Depois disso, estamos prontos para começar a agrupar o resto das camadas de acordo com nossas necessidades e efeitos posteriores Nesta parte, não pretendo animar os números. Então, vou simplesmente selecionar cada seção e agrupar tudo. Depois disso, podemos agrupar todas essas seções como uma. Agora, vamos lidar com a seção final desse design. Primeiro, vou trancar a caixa branca em segundo plano. Então, assim como fizemos no design anterior, vamos garantir que todos os painéis de tarefas tenham a mesma aparência e que o ícone V e a caixa verde estejam separados em suas próprias camadas , caso precisemos animá-los posteriormente Incrível. Agora, para esta área, podemos agrupar tudo. E para os três botões aqui, eu também os agruparei em um grupo já que não pretendo animá-los no After Effects Ótimo. Agora, vamos selecionar cada seção da tarefa e agrupá-la individualmente para que cada tarefa fique em sua própria camada separada. Incrível. Agora podemos começar a excluir as camadas vazias antes de continuar trabalhando no painel pop-up Feito isso, vamos ativar novamente a camada de sombra e bloquear todas as camadas que já organizamos. Agora podemos mover todas as formas e camadas do painel pop-up para o centro da tela e garantir que elas estejam acima da camada de sombra. Não se esqueça de que o design pop-up ainda não está agrupado. Portanto, se você tentar alinhá-lo diretamente ao centro, não funcionará Para corrigir isso, primeiro selecione todas as formas pop-up e agrupe-as. Agora você pode alinhar o grupo inteiro no centro da tela Depois que o pop-up estiver perfeitamente alinhado, você poderá desagrupá-lo novamente e começar a separar as camadas E se você receber uma mensagem de erro durante a etapa, não se preocupe. Isso geralmente significa que você selecionou acidentalmente uma camada bloqueada Basta verificar sua seleção e repetir o processo. Tudo bem Então, agora podemos começar a trabalhar nesse design. Primeiro, você pode selecionar algumas camadas e arrastá-las levemente para os lados apenas para entender o que você tem aqui e como tudo é construído, por exemplo, não quero que essa caixa de campo fique sem um preenchimento. Então, vou adicionar um preenchimento branco a essa forma porque sei que vou animá-la mais tarde no After Effects Agora, vamos selecionar o fundo branco desse pop-up e bloqueá-lo para que possamos selecionar livremente o resto das formas e camadas. Agora, estamos prontos para começar a agrupar as partes relevantes. Vou manter o texto dentro dessa caixa de campo em uma camada separada pois pretendo animá-lo posteriormente no After Effects O ícone de upload, por outro lado, pode ser agrupado como uma unidade Em seguida, para as pequenas seções de tarefas. Vou prepará-los para animações de caixas de seleção. Para fazer isso, agruparei o ícone V com a caixa verde para todas as tarefas. Posteriormente, no After Effects usarei essas camadas agrupadas para criar a animação da caixa de seleção Para a barra de progresso, vou deixá-la agrupada como está, porque não pretendo animá-la Os números aqui também podem ser agrupados. Agora, vamos lidar com a seção superior desse pop-up. Agruparemos a seção de data, a seção de avatar, o ícone de saída, os três pontos e o botão na parte superior O texto abaixo já está agrupado, então não precisamos tocá-lo Isso significa que terminamos agrupar todas as seções relevantes nesse pop-up. A próxima etapa é excluir as camadas vazias para limpar tudo. Feito isso, terminamos de preparar esse painel. Por enquanto, vá em frente e salve o projeto agora antes de prosseguir. Na próxima etapa, lidaremos com outro design complicado, e esse vai ser super interessante, então fique por aqui Tudo bem Agora, vamos voltar à Figma e copiar o próximo quadro Precisamos nos preparar para a animação. De acordo com nosso storyboard, essa é a parte em que mostramos os painéis da interface do usuário dos contatos Nesse caso, prepararemos o design de uma forma que nos permita adicionar posteriormente imagens reais de avatares humanos. Então, se você estiver acompanhando, vamos encontrar a moldura Figma correta e copiá-la para o Illustrator Aqui está a seção de contato. Digamos que, depois de confirmar com o cliente, sabemos que esse é o quadro que precisamos animar Como de costume, vamos copiá-lo no formato SVG, depois voltar ao Illustrator e criar um novo documento, certificar-se de nomeá-lo corretamente e colar o design copiado Vejo que esse design é um pouco mais alto que os anteriores, mas tudo Isso não interferirá em nosso fluxo de trabalho. Continuaremos com o mesmo processo de separação das camadas Então, primeiro, vamos liberar a máscara de recorte e depois desagrupar o design Agora, como decidimos que, nesta parte, substituiremos os ícones do Avatar imagens humanas reais posteriormente na animação, teremos isso em mente ao agrupar e organizar esse painel de interface do usuário Por enquanto, basta continuar com o mesmo processo de separação das camadas E enquanto você está fazendo isso, quero lembrá-lo de algo importante. Talvez agora, esse processo pareça opressor ou demorado demais Mas lembre-se de que você provavelmente nunca precisará preparar um número tão grande de painéis de interface de usuário em um projeto. Estou fazendo isso aqui de propósito para que você possa praticar comigo e, mais tarde, na fase de animação, teremos uma variedade de exemplos diferentes de painéis de interface de usuário com os quais trabalhar. Ok, de volta à aula. Então, agora chegamos à seção interessante. Primeiro, vamos bloquear a caixa branca desta seção. Podemos agrupar essa parte e os dois botões que temos aqui no lado esquerdo. Agora vamos passar para a seção de avatar aqui abaixo. Percebi que toda a seção está agrupada. Então, a primeira coisa que vou fazer é começar a desagrupar tudo e separar todas as camadas dentro desse grupo para que eu possa decidir o que deve ser agrupado e Ok, agora vamos tentar agrupar toda essa seção. Como você pode ver, temos algo interferindo, e é a forma que foi usada para uma máscara de recorte, então vamos selecioná-la e excluí-la do design porque não precisamos Então, agora vamos selecionar a seção inteira e agrupá-la. Agora vamos passar para todas as caixas de interface de usuário do Avatar abaixo. Como queremos adicionar imagens reais em vez dos ícones do avatar, vamos garantir que não estamos selecionando as formas que criam o ícone do Avatar aqui e agrupar esta seção. Em seguida, podemos desativar a camada que acabamos de criar para que possamos selecionar facilmente todas as formas que criam o ícone do Avatar e agrupá-lo. Usaremos essa forma posteriormente no After Effects como uma máscara para as imagens humanas adicionaremos nesta seção. Você pode colocar essa camada agora acima da anterior, se quiser. Mas o mais importante, vamos continuar repetindo esse processo para o resto dos painéis de interface do avatar que temos aqui Podemos primeiro terminar de agrupar todas as caixas principais e as formas relativas a cada caixa Agora, em vez de lidar com os ícones do Avatar, vamos pular essa parte por enquanto , porque será um pouco difícil encontrar as camadas que precisamos desativar para ver as formas dos ícones do Avatar Então, antes de fazermos isso, vamos terminar de agrupar todo o resto das partes E depois de excluir as camadas vazias, podemos encontrar facilmente as formas do avatar e agrupá-las conforme necessário Então, agora vamos agrupar a seção de números de página em um grupo e, em seguida, agrupar o botão à esquerda também. Agora, vamos começar a excluir as camadas vazias para que possamos navegar pelo painel de camadas de forma um pouco mais conveniente Podemos fazer isso usando o método de seleção reversa. Ótimo. Agora podemos encontrar as camadas da caixa no painel da camada e podemos desativá-las todas para que possamos selecionar as formas dos ícones do Avatar com muito mais facilidade. Agora, vamos começar a agrupá-los um por um. Feito isso, vamos colocar cada camada de avatar acima de sua seção relativa. Por fim, podemos excluir as camadas vazias restantes e depois salvar o arquivo no computador. E com isso, terminamos esta lição e estamos prontos para passar para a próxima, onde lidaremos com outro quadro complicado de figma Vai ser incrível. Te vejo na próxima. 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. 7. Estruturando painéis complexos de UI para animação: Estou de volta Então, nesta lição, vamos trabalhar em uma parte em que queremos mostrar outra animação de demonstração do software. Mas desta vez, a animação é um pouco mais complexa. De acordo com o storyboard, precisamos trabalhar em uma cena em que vemos a seção de mensagens Então, primeiro, vamos até Figma e encontre essa moldura aqui no projeto. Aqui está. No nosso caso, precisamos mostrar uma animação da lista de mensagens que se transforma em um bate-papo pessoal É a seção de conversação. Nesse ponto, tente entender o fluxo dos painéis da interface do usuário o máximo que puder. Veja as diferentes seções dentro dos dois designs e veja qual será a melhor maneira de organizar as camadas. Isso lhe dará uma ideia de quais camadas você deve deixar como camadas separadas e quais camadas você deve agrupar. Com essa ideia em mente, vamos começar com o primeiro quadro, que é a seção de mensagens. Vamos copiá-lo como SVG do Figma e, em seguida, um Illustrator, criar um Vamos dar um nome a esse novo documento. Agora, vamos colar o design da figma aqui. Tudo bem Então, agora, como de costume, vamos retirar todas as camadas do design agrupado Agora, podemos excluir a forma que foi usada para a máscara de recorte e bloquear a camada principal de fundo cinza aqui para que possamos selecionar o restante das formas e camadas com facilidade Já podemos excluir a camada vazia e a camada que continha a forma que foi usada para a máscara de recorte. Ótimo. Então, agora vamos começar a agrupar cada seção nesse design, começando pelo menu à esquerda Agora podemos agrupar toda essa seção aqui com todas as guias diferentes, incluindo, é claro, a caixa branca atrás Em seguida, vamos agrupar as formas e as camadas do cabeçalho aqui em cima. E agora vamos começar a lidar com a seção principal desse design, que é a lista de mensagens. Então, primeiro de tudo, vamos bloquear a caixa branca para que eu possa selecionar o resto dos objetos aqui facilmente. Agora, vamos agrupar essa parte e, em seguida agrupar o botão roxo aqui. Então, agora vamos pensar novamente sobre quais objetos aqui precisam ser agrupados e outros enfeites Vamos voltar ao design do Figma e tentar ver o que está acontecendo no próximo painel de interface do usuário que precisa vir neste fluxo de demonstração. Pelo que entendi, precisamos criar uma animação clicando em um dos contatos e, em seguida, um painel de conversa privado dessa pessoa específica deve aparecer Tudo bem? De volta ao Illustrator Vou começar me certificando de que tenho apenas uma estrela vermelha aqui. Caso eu queira criar uma animação da estrela vermelha aparecendo para os outros contatos da lista. A seguir, vamos ver o que está acontecendo aqui com a caixa atrás do contato. Vejo que a caixa não está cheia de nenhuma cor. E como eu já sei que no After Effects, vou animar essa caixa, mudando de forma, acho melhor preencher todas as caixas com branco Então, vamos selecioná-los um por um e mudar a cor de preenchimento para branco. Agora podemos facilmente selecioná-los todos juntos e bloqueá-los no painel de camadas. Precisamos bloqueá-los para que possamos selecionar o resto das formas aqui. Sem que essas caixas interfiram, você pode entender facilmente qual camada está selecionada observando o pequeno quadrado no lado direito da camada É assim que você sabe que essa é a camada selecionada. Não estamos agrupando tudo o que é relevante para cada caixa e cada contato, porque, como já vimos e entendemos, precisamos criar uma animação de demonstração desta seção E nessa animação, o design da caixa mudará. Isso significa que cada objeto que pertence a cada contato desaparecerá ou mudará de posição. Portanto, precisamos que a maioria das formas e camadas aqui permaneçam separadas porque vamos animá-las no After Effects. Tudo bem Então, agora estamos prontos para agrupar os objetos em cada seção. E antes de prosseguir, vamos dar uma olhada no design do Figma para entendermos se precisamos que algum ícone aqui permaneça em camadas separadas Pelo que vejo aqui, entendo que essa parte com os três ícones no lado direito precisa desaparecer quando a transição para o próximo painel da interface do usuário acontecer. Portanto, no Illustrator, podemos realmente agrupar os três ícones em uma camada Obviamente, se você quiser criar uma animação que desaparece para cada um dos ícones separadamente, deixe cada ícone em sua própria camada Mas, no nosso caso, não precisamos fazer isso. Eu prefiro fazer com que todos desapareçam de uma só vez. Quando terminarmos com isso, vamos continuar e pensar na próxima seção do design. Vamos considerar o ícone do Avatar aqui. Queremos deixar o ícone do Avatar separado do ponto verde ou vermelho ao lado dele? Vamos ao design do Figma e pensar sobre isso. Vejo aqui que a seção do avatar realmente não muda, que significa que eu posso realmente agrupar as formas que criam o ícone do avatar e o ponto ao lado dele em um grupo, para que fiquem em uma camada. Obviamente, caso queira adicionar uma imagem de um humano real, você deve deixar o ícone do Avatar separado do ponto para poder usar o ícone do Avatar como uma máscara para a imagem adicionada no After Effects. No nosso caso, não quero adicionar fotos aqui, então vamos agrupar toda essa seção. Vamos fazer o mesmo com o resto das seções de avatar no design. Tudo bem Então, com isso, acho que terminamos de agrupar todas as camadas e objetos necessários no design e agora estamos prontos para começar a excluir as camadas vazias no painel de camadas Vou acelerar esse processo por enquanto. Não notei que, durante o processo, excluí a estrela vermelha por engano. Então, nesse caso, copiarei uma das estrelas cinza, criarei uma nova camada e colarei a estrela cinza aqui na posição correta. Aqui está uma dica rápida para alinhar o objeto caso você não queira criar uma nova guia Estou trazendo a tela para a esquerda, onde a segunda estrela toca a área cinza do painel esquerdo do Illustrator, e é assim que sei onde a primeira estrela cinza deve ser colocada Para a cor, vou deixá-la cinza e, em seguida, criar uma animação de mudança de cor para vermelho no After Effects, se eu precisar. Tudo bem E com isso, terminamos de preparar esse design. Agora é possível salvar esse arquivo antes de passar para a próxima tela. Temos mais dois pela frente, então mantenha o foco. Os próximos dois serão mais rápidos. Tudo bem. Então, agora vamos passar para o próximo painel de interface do usuário que precisamos preparar para a animação. Vamos voltar ao Figma e selecionar o quadro relevante, que é a seção de conversa Vamos copiá-lo como está. Agora, vamos voltar ao Illustrator e criar um novo documento Vamos dar a este documento um nome apropriado. Também podemos chamá-lo de mensagens, porque ele ainda pertence à seção de mensagens na qual criaremos um fluxo de demonstração do sistema de mensagens dessa plataforma SAS. Vamos agora colar o design que copiamos do Figma e começar a trabalhar nele Como sempre, primeiro, vamos liberar a máscara de recorte. Em seguida, precisamos desagrupar o design. Depois disso, vamos espalhar todas as camadas desse design e movê-las para fora da camada principal. Já podemos bloquear a camada de fundo cinza e, antes de prosseguir, excluir as duas camadas abaixo dela. Uma é uma camada vazia e a outra é uma camada que contém a forma usada para a máscara de recorte Agora, vamos começar a agrupar as seções, começando pelo menu lateral, que não mudou em relação à tela anterior Em seguida, vamos agrupar o menu principal aqui no lado esquerdo. Em seguida, vamos agrupar a seção do cabeçalho. E agora vamos começar a lidar com a dissecação principal neste painel de interface do usuário Podemos começar localizando a caixa branca e, em seguida, agrupar as diferentes seções dentro desse painel Tudo bem E agora vamos lidar com a seção principal aqui, que são as caixas de contatos. Vamos pensar em quais formas devem ser agrupadas e quais não devem Como a maioria das partes desse fluxo de demonstração já estavam separadas no design anterior, podemos agrupar todas as formas ou camadas que sabemos com certeza que não serão animadas ou usadas no After Por exemplo, como criaremos uma animação de forma metamorfa para cada caixa de cada contato, neste design, podemos agrupar o ícone do Avatar dentro da caixa, apenas para usá-lo como referência posteriormente Não o animarei novamente porque já o preparamos no design anterior Então, agora vou selecionar a caixa e os objetos do avatar e agrupá-los todos juntos. Vamos fazer isso pelo resto do design. Agora, para o resto dos objetos dentro das caixas, quero deixar cada objeto separado porque precisamos criar algum tipo de animação para criar algum tipo de animação para eles posteriormente no After Effects. Tudo bem. Agora, vamos lidar com essa área. Podemos agrupar o botão de data. Agora, vamos ampliar e pensar sobre o que precisamos fazer aqui. Enquanto isso, não faça isso comigo. Eu quero explicar algo bem rápido. Em primeiro lugar, caso queira animar cada ícone ou forma principal separadamente, você pode agrupar as formas do avatar em um grupo, depois agrupar as formas da mensagem de texto em outro grupo e, finalmente, deixar o texto da hora em uma camada separada Obviamente, precisaríamos repetir isso para cada mensagem desta seção. Mas, no meu caso, quero criar uma animação de introdução para toda a seção de mensagens de uma só vez, então vou desfazer minhas ações. E agora você pode fazer isso comigo. No nosso caso, agruparei todas essas formas, então teremos uma camada para cada seção da mensagem. Até agora, espero que você entenda que o processo de agrupamento depende completamente de como você planeja animar seus painéis de interface Tudo bem. Vamos continuar fazendo isso nas próximas quatro seções de mensagens. Agora, vamos parar aqui e pensar no que queremos fazer com as duas últimas mensagens. Estou dizendo isso porque acho que pode ser uma boa ideia criar uma animação de demonstração das mensagens entre dois contatos. Vou me certificar de manter cada forma aqui em uma camada separada, porque talvez eu queira criar algumas animações mais interessantes para essa parte Agruparei as formas do avatar em uma camada e, em seguida, deixarei o texto na caixa de texto em camadas separadas, pois posso alterar o texto posteriormente no processo de animação. Também vou deixar a hora em uma camada separada. O mesmo vale para a última mensagem. E aqui, tenho certeza de que criarei uma animação de digitação de texto Então, vou manter o texto em uma camada separada. Agora, vamos verificar a caixa arredondada atrás dela. Vejo que essa caixa arredondada não tem preenchimento, então adicionarei um preenchimento branco, pois sei que vou animar a forma no After Effects Feito isso, vamos passar para os próximos três objetos e agrupá-los um por um. Assim, cada objeto estará em sua própria camada. Ótimo. Então, com isso, terminamos de preparar esse design e estamos prontos para começar a excluir as camadas vazias Tudo bem Tudo parece bom. Agora vamos salvar esse arquivo. Com isso, concluímos esse design de interface e estamos prontos para passar para o próximo, onde prepararemos o painel final da interface do ou a tela da interface do usuário para este projeto. Ótimo. Então, agora vamos preparar o painel final da interface do usuário para este projeto. Vamos até a Figma e encontrá-la para que possamos copiá-la para o Illustrator De acordo com o storyboard, nesta parte, precisamos mostrar um pequeno fluxo de demonstração do software, onde mostramos a tela do navegador de arquivos e demonstramos o processo de upload de um Como você pode ver, temos o painel principal e um pequeno pop-up. Assim como fizemos da última vez que tivemos essa situação. Vamos primeiro copiar apenas as camadas pop-up e, depois disso, voltaremos e copiaremos a tela principal. Dessa forma, será muito mais fácil. Para preparar esse design no Illustrator. Podemos encontrar o grupo principal desse design nas camadas Figma Vamos clicar com o botão direito do mouse e copiá-lo como SVG. Agora, vamos ao Illustrator e criaremos um novo documento. Vamos chamá-lo de navegador de arquivos de tela oito. Ótimo. Agora vamos colar o design aqui. E, por enquanto, basta movê-lo para o lado. Em seguida, vamos criar uma nova camada e depois voltar ao Figma para copiar a tela principal Podemos desligar o pop-up por enquanto e depois copiar todo o quadro Figma De volta ao Illustrator, vamos colá-la na nova camada que criamos e iniciar o processo de separação de todas as camadas antes de começarmos a agrupá-las Agora, como temos uma camada de sombra aqui, assim como no design anterior, vou encontrar essa camada na pilha e renomeá-la para sombra, para que possamos encontrá-la facilmente mais tarde Tudo bem, podemos desativar essa camada por enquanto , bloquear a camada principal de fundo cinza e, finalmente, excluir as duas camadas abaixo dela, pois não precisamos delas. Ótimo. Então, agora vamos começar a agrupar as seções aqui, começando pelo menu à esquerda Enquanto eu tentava selecionar o pequeno retângulo cinza arredondado, notei que há uma linha aqui que realmente não precisamos para a fase de animação posterior no After Effects Portanto, vou selecioná-lo e excluí-lo do design. Tudo bem Então, vamos seguir em frente e agrupar essa seção do menu. Agora podemos colocar o menu principal esquerdo do software acima da camada recém-criada, para que a pequena seta fique acima do segundo item do menu. Tudo bem Agora, vamos para a seção do cabeçalho. Mas antes de agrupar a seção inteira, vamos fazer uma pausa por um segundo e voltar à Figma para entender um pouco melhor Como queremos criar uma animação pop-up ao adicionar um novo arquivo neste painel de interface do usuário, acho melhor deixar o botão roxo da cabeça fora do grupo Esse será o botão que usaremos para criar uma animação de clique e, depois disso, o painel pop-up para fazer o upload de um novo arquivo será exibido Com isso em mente, vamos voltar ao Illustrator e primeiro agrupar todas as formas e camadas que pertencem a esse botão roxo Depois de agrupados, desative essa camada por enquanto para que possamos selecionar facilmente o restante dos objetos do cabeçalho e agrupá-los todos juntos Ótimo. Agora, podemos colocar o botão roxo acima do grupo de cabeçalhos recém-criado e, em seguida , continuar trabalhando na seção principal desse painel de interface do usuário. Como tenho certeza de que vou querer criar uma animação de introdução para cada caixa de documento dentro desta seção, começarei desagrupando seção e separando todas as Dessa forma, posso decidir quais formas e camadas devem ser agrupadas de forma adequada ao processo de animação. Tudo bem Então, depois de separar as camadas, notei que há uma forma que foi usada como máscara de recorte Vou localizá-lo e excluí-lo, para que eu possa selecionar facilmente o resto das camadas e objetos. Feito isso, selecionarei a seção inteira e a agruparei adequadamente. Ótimo. Agora, vamos começar a trabalhar na seção de caixas de documentos abaixo. Quando não tenho certeza do que está acontecendo na estrutura, geralmente movo um pouco os objetos para ver quais camadas já estão agrupadas e quais não estão Por exemplo, nesse caso, vejo que o traçado cinza está separado do preenchimento da caixa branca. No nosso caso, não precisamos que eles sejam separados. Na verdade, também acho que não precisamos separar cada objeto de cada caixa de documento. Assim, posso agrupar cada seção em uma camada. Mas, como eu sei, vou criar uma animação de fluxo de demonstração do upload de um novo arquivo PNG ou JPEG, vou me certificar de manter separados os objetos na seção caixa do documento PNG Dessa forma, terei mais flexibilidade caso queira fazer algo especial com este ou até mesmo duplicá-lo e substituir os nomes posteriormente Então, vamos manter isso em mente. Mas, por enquanto, vamos começar a agrupar cada seção da caixa de documentos, uma por uma Como dissemos anteriormente, deixaremos seção da caixa de documentos PNG desagrupada por enquanto e passaremos a agrupar os restantes Tudo bem. Tenho certeza de que não precisarei criar nenhuma animação especial para os números das páginas. Portanto, nesse caso, podemos simplesmente selecionar a seção inteira e agrupá-la. Incrível. Agora, vamos voltar e lidar com a seção de documentos PNG desagrupados Para facilitar um pouco, podemos começar agrupando o traçado cinza na caixa de preenchimento branca e, em seguida, bloquear essa camada para possamos selecionar com segurança todos os objetos restantes que formam o ícone do documento PNG e agrupá-los também Ótimo. Agora vamos para o lado direito e verificar se há outros objetos que possamos agrupar em uma camada. Aqui podemos agrupar a seção inteira com os ícones do Avatar. Quanto às camadas de texto, elas já estão agrupadas corretamente em camadas separadas, então não precisamos tocá-las Podemos mantê-los do jeito que estão. Ótimo. Então, com isso, terminamos de preparar a tela. E agora podemos seguir em frente para excluir todas as camadas vazias do painel Camadas. Incrível. Em seguida, vamos ativar todas as camadas novamente e bloqueá-las para que possamos começar a trabalhar no painel pop-up. Não se esqueça de agrupar o pop-up em si caso queira alinhá-lo rapidamente ao centro da tela Tudo bem Vamos começar separando as camadas Caso você receba essa mensagem, não se preocupe. Provavelmente significa que você não selecionou a camada relevante antes de dividir as Para corrigir isso, primeiro desfaça a ação. Em seguida, desagrupe a camada novamente, clique para desmarcá-la, selecioná-la novamente e, finalmente, dividir as camadas Assim, podemos decidir claramente quais formas devem ser agrupadas nesta seção Pelo que vejo, podemos agrupar o traçado pontilhado junto com o retângulo roxo atrás dele E caso queiramos criar uma animação para esse elemento posteriormente, sempre podemos usar as propriedades nativas do traçado dentro do After Effects. Ótimo. Agora, vamos fazer o mesmo com todas as formas que compõem o ícone da pasta. Para facilitar a seleção, vamos diminuir o zoom, encontrar o retângulo branco desse pop-up e bloqueá-lo Dessa forma, podemos selecionar com segurança todas as formas pequenas que estão atualmente em camadas separadas e agrupá-las. Em seguida, vejo que cada linha de texto já está em uma camada separada, então vamos deixá-las como estão. Agora vamos ver o ícone X e o texto do arquivo de upload. Nesse caso, podemos agrupá-los com o retângulo branco Então, vamos desbloquear o retângulo, selecionar todas essas camadas e agrupá-las em uma Incrível. Com isso, concluímos a preparação todas as seções desse painel de interface do usuário. Agora podemos excluir as camadas vazias restantes no painel e finalmente salvar o projeto antes de passar para a próxima lição. Nessa lição, analisaremos todos os designs preparados e faremos algumas melhorias antes de importá-los para o After Effects Vai ser incrível, então nos vemos lá. 8. Refinando o design com cantos arredondados: Volte. Nesta lição, melhoraremos um pouco a aparência dos designs. Por exemplo, podemos começar arredondando os cantos de todos os painéis de interface do usuário que temos para todas as telas que preparamos para o After E como temos muitas formas agrupadas, é melhor usar a ferramenta de seleção direta para selecionar os cantos para que possamos arredondá-los. Então, vamos selecionar essa área, segurar a tecla shift e escalar os cantos ao nosso redor para, digamos, 20 pixels por enquanto. Agora vamos fazer isso em todos os cantos desse design. Podemos selecionar essa área e, em seguida, passar para o próximo canto, segurar a tecla Shift e selecionar a área também. Depois disso, vamos subir e, enquanto pressiona a tecla Shift novamente, selecione essa área também. Agora, vamos definir o arredondamento todos os cantos selecionados para 20. Acho que fica um pouco melhor com os cantos arredondados Então, agora, depois de estarmos satisfeitos com o novo visual, não vamos esquecer de pressionar Control ou Command S para salvar o arquivo. Ótimo. E agora vamos passar para a próxima tela e fazer o mesmo. Então, selecionarei todos os quatro cantos aqui e, em seguida, definirei o arredondamento para 20 ou talvez tente 30 Acho que 30 parece melhor. Então, vamos deixar as coisas assim. Vamos salvar a nova atualização agora. E antes de prosseguir, vamos voltar para a primeira tela e ajustar os cantos para 30 também. Quero mostrar esse processo porque pode ser um pouco complicado calcular o valor dos cantos para áreas em que temos uma forma com o canto arredondado, é muito fácil Tudo o que precisamos fazer é clicar na forma usando a ferramenta de seleção direta , clicar no canto que queremos alterar e atualizar o valor do canto. Também podemos fazer o mesmo nesta esquina. Vamos fazer o mesmo com o canto inferior direito também. E agora, aqui está a parte complicada. Em áreas onde temos mais de uma forma em conjunto, como nesta parte, temos a forma branca do cabeçalho e a forma cinza do fundo. Precisamos ter certeza de atualizar os dois cantos das duas formas. Um erro comum que pode acontecer é quando você seleciona as formas e depois clica em um ponto de canto sem perceber que clicou e selecionou o canto somente da primeira forma na linha Nesse caso, somente o canto do retângulo branco do cabeçalho muda Portanto, nesses casos, usando a ferramenta de seleção direta, selecione as duas formas sem clicar no ponto do canto. Em vez disso, vá direto para ajustar o valor do canto. E, claro, depois de atualizar todos os cantos, não vamos esquecer de salvar o arquivo. Tudo bem Então, agora vamos para a terceira tela e ajustar o arredondamento dos cantos Mas vamos salvar o arquivo agora e passar para a próxima tela. E agora, antes de passar para a próxima tela, também quero ocultar todos os ícones do logotipo na parte inferior do menu principal. Como toda essa área está agrupada, vamos usar a ferramenta de seleção e clicar duas vezes em uma das camadas aqui até que possamos selecioná-la Não tenho certeza do que está acontecendo nessa área, então vou encontrar a camada de sombra e desligá-la por enquanto. Vejo que agora posso selecionar o resto das formas e logotipos. Então, vamos fazer isso. Para facilitar essa seleção, vamos selecionar toda a área, incluindo a camada azul atrás, segurar a tecla Shift e clicar na camada azul para desmarcá-la E agora, em vez de excluí-las, vamos desativá-las no painel de camadas Para isso, podemos abrir o grupo de camadas e desativar as camadas selecionadas. Podemos reconhecer as camadas selecionadas pelos ícones quadrados rosa ao lado delas. Tudo bem Parece que está tudo bem. E agora podemos sair do grupo clicando em algum lugar fora do design para desmarcar as camadas selecionadas E antes de passar para a próxima tela, não esqueçamos de salvar o arquivo. Vou acelerar esse processo porque é praticamente o mesmo que fizemos na tela anterior. Tudo bem Assim que terminarmos de ajustar o design, podemos passar para a próxima etapa, onde finalmente começaremos a importar os designs para o After Effects Temos alguns recursos adicionais aqui no Illustrator que certeza, usaremos na fase de animação Por exemplo, sabemos que temos uma cena em que precisamos criar uma animação de logotipo para que possamos prepará-la agora mesmo. Também podemos criar a paleta de cores para este projeto, que possamos acompanhá-la durante todo o processo de animação Então, vamos começar a trabalhar e preparar esses dois bem rápido. Obviamente, você não precisa fazer isso porque já tem a paleta de cores, os arquivos do logotipo e a pasta de ativos É muito importante que eu mostre esse processo para que, ao trabalhar em seu vídeo explicativo, você acompanhe meu E, claro, poderíamos preparar esses arquivos mais tarde, depois de já termos começado a animação, mas eu prefiro prepará-los o mais rápido possível. Então, primeiro, vamos começar preparando a paleta de cores. Para isso, podemos realmente verificar no projeto FiGMA que o cliente compartilhou conosco se há algum guia de design ou ativo de sua empresa maioria das vezes, quando você obtém um projeto Figma, você também obtém esses ativos de design No nosso caso, podemos encontrar as cores aqui na seção de páginas. Agora, vamos selecionar as camadas que precisamos copiar para o Illustrator e depois copiá-las no formato SVG Assim como fizemos com os painéis de interface do usuário. Agora, vamos voltar ao Illustrator e criar um novo documento Podemos usar o modelo de arquivo recente e não esquecer de nomear esse arquivo. Vamos chamá-lo de um ponto de cores. Agora podemos colar as camadas de figma e começar a prepará-las. Primeiro, vou reduzir esse grupo até que ele caiba no meu documento. Em seguida, vou me certificar de que as camadas estejam agrupadas para que eu possa alinhar todo esse grupo ao centro do documento Por fim, vou me certificar de nomear as cores dessa camada, pois será muito mais fácil encontrá-la posteriormente no After Effects dessa forma. Feito isso, vamos salvar esse arquivo e prosseguir com a preparação do logotipo. Para o logotipo, podemos realmente encontrá-lo em uma das telas. Como você pode ver, temos um logotipo completo aqui na tela cinco. Então, vamos clicar duas vezes no logotipo e copiar as formas relevantes que temos aqui. Agora vamos criar um novo documento, do mesmo tamanho e chamá-lo de logotipo de um ponto. Em seguida, vamos colá-lo aqui, agrupá-lo, escalá-lo e alinhá-lo sem problemas. Tudo bem E agora, como sabemos que criaremos uma animação de logotipo, vamos preparar esse design para o After Effects. Ou seja, vamos espalhar as camadas. Mas primeiro, só para que possamos ver o que estamos fazendo, vamos criar uma nova camada e desenhar um retângulo com o tamanho da tela E agora preencha com uma cor diferente para que possamos ver claramente no que estamos trabalhando. Coloque essa camada abaixo do logotipo. E se quiser, escolha uma cor mais contrastante, para que o logotipo se destaque melhor Finalmente, vamos bloquear essa camada e começar a preparar o logotipo. Tudo bem Então, primeiro, vou desagrupar as camadas, depois selecionar o texto do logotipo e alinhá-lo verticalmente ao centro da tela Só para ter certeza, também agruparei o ícone, para que eu possa alinhá-lo verticalmente à tela, garantindo que tudo esteja bem garantindo que tudo esteja bem Quando tudo estiver perfeitamente alinhado, podemos começar a desagrupar as formas e separá-las Aqui, precisamos liberar o caminho composto. Agora, vamos corrigir o estranho problema de preenchimento aqui bem rápido. Primeiro, certifique-se de selecionar todas as camadas problemáticas e, em seguida, use a ferramenta Shape Builder para corrigi-las mouse sobre a área problemática, mantenha pressionada a tecla Alt ou Option no Mac e clique nessa área para excluir o preenchimento Ótimo. Então, agora vamos começar a espalhar todas as letras em camadas separadas para que possamos animá-las individualmente no After Effects Feito isso, vamos nomear nossas camadas, seja mais fácil navegar por elas posteriormente no After Effects durante a fase de animação. Tudo bem E agora vamos salvar esse arquivo. E com isso, termine a aula. Agora que temos tudo preparado para animação em termos de elementos de design vetorial, estamos prontos para finalmente abrir o After Effects e começar a importar tudo o que preparamos Faremos isso na próxima lição. Vai ser incrível, então nos vemos lá. 9. Importando os designs para o After Effects: Volte. Nesta lição, importaremos os designs para o After Effects e prepararemos o projeto para animação e After Effects. Antes de fazermos isso, quero pegar a paleta de cores e os arquivos do logotipo da pasta AI e colá-los na pasta de ativos Na minha opinião, eles são mais como ativos gerais que usaremos no projeto, em vez de arquivos de IA específicos preparados para o After Effects. Tudo bem, de volta para a pasta AI. Caso você não tenha me acompanhado preparando os designs do Figma no Illustrator, não se preocupe Você pode encontrar todos esses designs finalizados e polidos nas telas da pasta AE, que você verá se abrir ativos dentro da pasta principal do curso que você baixou de mim Tudo bem. Feito isso, vamos agora abrir o Adobe After Effects juntos. Vou usar a versão Beta porque esta é a versão mais atualizada do After Effects que consegui obter ao gravar este curso. E eu quero usar a versão mais recente pois há algumas atualizações muito legais nela, incluindo os quadros-chave de deslocamento e a função de camadas que, é claro, praticaremos é claro, praticaremos Caso você esteja usando uma versão mais antiga do After effects, abaixo da versão 2025, não se preocupe. Também mencionarei como fazer as coisas que estamos fazendo na versão mais recente da sua versão. Ok. Então, depois de abrirmos o After Effects, vamos primeiro ter certeza de que estamos todos na mesma página em relação ao layout do painel. Vamos até a janela e verifique se selecionamos o layout padrão. Caso seu layout padrão pareça um pouco diferente, redefina-o porque você provavelmente mudou as posições do painel em algum momento no passado. Se você tiver uma tela pequena, talvez ache esse layout um pouco mais confortável, pois pode ver todas as guias na seção direita aqui, claramente, como a guia Efeitos e a guia de propriedades Mas se você quiser que o foco esteja na linha do tempo, você pode pegar o painel da linha do tempo e arrastá-lo até aqui. Quando você vê uma linha cinza, solte o painel e agora esse painel ficará maior, cabe a você fazer o que achar melhor no seu caso. E, claro, caso você não veja alguns dos painéis importantes, como os painéis de texto, você pode ir até Janela e adicioná-los aqui. Por exemplo, vamos adicionar a guia de parágrafo na guia de caracteres. Tudo bem Então, agora, quando terminarmos o layout, vamos ter certeza de que também estamos na mesma página em relação às preferências do sistema. Então, vamos para Editar preferências e primeiro acessar Salvamento Automático e definir o salvamento automático de 20 minutos a 5 minutos. Queremos que o After Effects salve nosso projeto automaticamente em incrementos menores, pois nesses tipos de projetos, o sistema pode falhar repentinamente Portanto, queremos ter certeza de que a cada 5 minutos After Effects salve automaticamente nosso projeto. Agora vamos para Geral e certifique-se marcar a caixa de seleção que centraliza o ponto de ancoragem Dessa forma, o ponto de ancoragem de qualquer forma que criarmos será centralizado automaticamente Feito isso, vamos agora acessar Mídia e cache de disco e verificar se a pasta todo o cache temporário é salvo durante o uso do After Effects está localizada em um disco rígido do seu computador com muito espaço livre. Então, clique em Escolher pasta e certifique-se de que o disco e a pasta em que você está salvando o cache tenham bastante espaço livre. Caso contrário, o After Effects pode funcionar lentamente. Para o tamanho mínimo do cache de disco, você pode deixá-lo em 46 GB. Tudo bem E agora vamos passar para a próxima configuração que queremos ajustar, que é memória e desempenho. Nesse caso, isso depende muito do seu computador. Se você perceber que sua RAM instalada é menor que a minha, provavelmente verá números diferentes aqui. O mais importante é reduzir a RAM reservada para outros aplicativos. Portanto, a RAM disponível para o After Effects será maior. Ótimo. Com isso, concluímos ajuste de todas as preferências necessárias do sistema e agora estamos prontos para começar a trabalhar Se você notar um pequeno ícone na área superior direita do meu After Effects que você não tem, é porque estou usando a versão Beta, então não se preocupe com isso. Tudo bem Então, agora vamos começar a trabalhar. Primeiro, vamos criar nossa primeira composição. Podemos chamá-lo de master comp e vamos garantir que estamos trabalhando em resolução full HD com 30 quadros por segundo E agora, caso você não tenha certeza do que escrever aqui, quero lhe dar uma dica rápida. Primeiro, quero que você acesse o site. Você pode encontrar o link na descrição desta lição ou no documento Links dentro da pasta de ativos que você baixou de mim. Ok, então o que queremos fazer é encontrar o script que recebemos do cliente, ou talvez nós mesmos o tenhamos criado . Em seguida, selecione todo o texto e copie-o. Agora, tudo o que precisamos fazer é voltar a este site e colar o texto. Ele contará automaticamente as palavras. E, como você pode ver aqui embaixo, mostra o tempo necessário para ler o texto em uma velocidade média de leitura. O que eu adoro fazer é verificar quanto tempo vai demorar no modo rápido e no modo lento. E isso me dá a duração mínima e máxima do projeto. Então, agora, de volta ao After Effects, eu sei que esse projeto não levará mais do que 2 minutos, com certeza. Ótimo. Então, com isso feito, vamos para a guia Avançado e definimos todos os valores exatamente como eu os defini. Em seguida, vamos para o renderizador de três D e garantir que estamos usando o clássico três D. Um ajuste final de configuração que eu quero fazer antes de começarmos o projeto é diminuir a profundidade de bits desse projeto Maior profundidade de bits significa mais tonalidades de cores e gradientes mais suaves Por exemplo, escolher uma profundidade de bits maior melhora a qualidade da imagem, mas requer mais capacidade de processamento e memória, o que pode reduzir significativamente as visualizações nos tempos de renderização Podemos inserir a configuração por meio configurações do projeto de arquivo e depois ir para a cor. Aqui está nas configurações de cores. Também podemos acessá-lo rapidamente clicando no ícone aqui embaixo no painel do projeto. Vamos definir a profundidade de bits por enquanto em oito bits por canal para que possamos obter um fluxo de trabalho mais rápido. Posteriormente, antes de renderizar o projeto quando terminarmos, podemos escalar isso para obter uma melhor qualidade de cor, mas, por enquanto, defina-o para oito Ótimo. Então, agora vamos pressionar Control ou Command S para salvar este projeto, que a função de salvamento automático seja ativada E, claro, para que possamos salvar manualmente o projeto sempre que quisermos durante o processo. Entre na pasta principal que você baixou para mim, vá para a pasta AE e salve o projeto que você está criando agora aqui. No seu caso, você provavelmente verá outro arquivo aqui, que é o arquivo em que estou trabalhando com a animação finalizada. Você pode ignorá-lo e simplesmente salvar o projeto que estamos fazendo agora. Tudo bem. E agora vamos começar a importar todos os designs de tela do Illustrator preparamos anteriormente para o After Effects Uma regra muito importante que tenho ao trabalhar em projetos complexos e com várias cenas é manter meu projeto de After Effects superorganizado Com isso em mente, vamos continuar trabalhando e ver como podemos aplicar essa regra neste curso. Então, agora, eu quero que você vá para a pasta principal que você baixou de mim e entre na pasta AI. Eu insisto que você use os arquivos AI. Eu me preparei para este curso e não para os arquivos que você mesmo salvou. Insira as telas da pasta AE e use os arquivos dentro dessa pasta, não os que você acabou de salvar. A razão para isso é que eu quero manter um fluxo consistente ao longo das aulas sem que você pare caso tenha perdido alguma coisa no processo de preparação. Como eu disse anteriormente, apresentarei todos os erros que podem acontecer ao longo do caminho durante as aulas. Nesses casos, você só precisa ouvir e assistir. Mas, por enquanto, use os arquivos AI finalizados que preparei dentro das telas para a pasta AE. Tudo bem Então, a primeira coisa que quero que façamos é importar todos os arquivos de IA para o After Effects como estão , sem separar as camadas Dessa forma, podemos usar essas telas posteriormente como camadas de referência. Agora, vamos criar uma nova pasta dentro do painel do projeto e chamá-la de Designs de tela. Arraste todos os arquivos dentro dessa pasta para manter nosso projeto organizado. Ótimo. Agora podemos salvar o projeto e começar a importar os designs com todas as camadas separadas conforme as preparamos no Illustrator Para isso, precisamos importá-los um por um. Vamos começar com a primeira tela. Agora, precisamos escolher importá-lo como uma composição porque queremos todas as camadas que estão dentro desse arquivo. E então, em dimensões da gravação, precisamos escolher o tamanho da camada Aqui está a diferença entre tamanho da camada e o tamanho do documento, caso você não saiba. Tamanho do documento. Cada camada terá o tamanho total da prancheta original do Illustrator Mesmo que o conteúdo real seja pequeno, isso pode tornar o alinhamento mais difícil e intacto Tamanho da camada, os limites de cada camada são baseados somente no conteúdo dentro dessa camada. Isso facilita o dimensionamento, a animação e o alinhamento de elementos individuais Ótimo. Então, vamos clicar em Ok e ver que agora temos uma nova composição da tela e uma nova pasta com todas as camadas desse arquivo do Illustrator. Tudo bem Então, agora vamos repetir esse processo e importar o resto dos arquivos do Illustrator para o nosso projeto After Effects Um ponto muito importante que eu quero que você tire desse curso é que trabalhar em projetos complexos nem sempre é um processo claro e limpo. Durante o fluxo de trabalho, você sempre encontrará algum erro que cometeu anteriormente ou algo que perdeu. Vou tentar mostrar isso ao longo do curso e tornar o curso o mais realista possível, porque na vida real, não trabalhamos como robôs. Cometemos erros e é importante saber como lidar com eles. Tudo bem, então, uma vez feito isso, para manter o painel do projeto organizado, adoro clicar aqui para digitar Portanto, cada ativo que tenho é classificado de uma forma mais organizada visualmente Agora, para manter nosso painel de projetos organizado, vamos criar outra pasta que chamaremos de precomps Armazenaremos nessa pasta todas as pré-composições que criamos durante o projeto As precomposições que já temos aqui a partir dos designs de tela, vamos selecionar a pasta precomps, criar outra pasta dentro dela e chamá-la Em seguida, arraste todas as pré-composições dos designs de tela para essa pasta Para manter nosso projeto ainda mais organizado, vamos garantir que nenhuma pasta seja selecionada e seguida, criar uma nova pasta chamada Screen Designs. Dentro dessa pasta, arraste todas as pastas que contêm as camadas da tela de cada design. Incrível. O painel do projeto parece muito melhor agora. Também podemos adicionar IA ao nome dessa pasta. Então, sabemos que essas são camadas do Illustrator. AI significa Adobe Illustrator. Dessa forma, podemos diferenciar facilmente essa pasta daquela em que posteriormente armazenaremos designs de tela achatados do Illustrator Ah, e acabei de perceber que havia um erro gramatical aqui, então eu o corrigi E agora estamos prontos para continuar com a lição. Nesse ponto, podemos salvar o projeto novamente. Outra pequena coisa que adoro fazer é colorir minha composição principal com uma cor diferente, eu possa encontrá-la facilmente mais tarde, quando precisar renderizar o projeto final ou navegar pelo painel do projeto Teremos muito mais ativos aqui posteriormente, então isso ajuda. Por falar em ativos, vamos até a pasta de ativos vamos até a pasta de ativos e trazer alguns dos arquivos que usaremos neste projeto. É claro que, eventualmente, usaremos todos os ativos que temos aqui. Mas, por enquanto, não precisamos importar tudo. Podemos começar com os ativos que usaremos em breve, por exemplo, a paleta de cores e o arquivo do logotipo Então, vamos começar com o logotipo. Já podemos colocar o PreComp recém-criado dentro da pasta precomps , mas não dentro da pasta PreComps da tela Quanto à pasta com as camadas, encontraremos um local para ela mais tarde. Tudo bem, agora vamos trazer a paleta de cores. Como não precisamos dele como camadas separadas, esse arquivo do Illustrator não inclui camadas separadas de qualquer maneira Podemos importá-lo como gravação, que significa que ele virá como um arquivo achatado Vejo que tenho uma caixa branca estranha na parte inferior. Eles provavelmente foram importados do Figma quando eu copiei do Figma em formato SVG para o Illustrator No seu caso, você receberá meu arquivo finalizado, então você não verá esse problema Para mim, consertar isso é muito fácil. Tudo o que preciso fazer é abrir a paleta de cores no Illustrator, selecionar as formas brancas e excluí-las Em seguida, pressionarei GRLS para salvar o arquivo porque alterei a localização desse arquivo na última vez que o salvei , precisarei encontrá-lo novamente. Agora está na pasta de ativos, então vou selecioná-la e salvá-la sobre a versão anterior. De volta ao After Effects, a paleta de cores será atualizada automaticamente Ótimo. Agora está tudo bem. Vamos criar outra pasta chamada assets e arrastar todas as pastas com camadas do Illustrator, e o restante dos ativos que usaremos neste projeto dentro dessa pasta, incluindo, é claro, a paleta de cores Agora temos tudo perfeitamente organizado. Vamos salvar o projeto e estamos prontos para passar para a próxima etapa, na qual finalmente começaremos a trabalhar no projeto. Isso vai ser super divertido. Então, vamos fazer isso. Tudo bem, agora vamos criar outro ativo que definitivamente usaremos neste projeto Um fundo gradiente animado. Podemos usá-lo em algumas das cenas ou talvez até em todas elas ao longo deste projeto. Obviamente, você pode baixar fundos animados prontos de sites de ações, mas quero mostrar a maneira mais útil criar um fundo gradiente animado personalizado diretamente no After Effects e também como usá-lo de forma inteligente no projeto Você verá exatamente o que quero dizer em apenas um minuto. O primeiro passo é criar uma nova esfera. Para fazer isso, pressione e segure a ferramenta retângulo e selecione a ferramenta Elipse Verifique se o preenchimento está definido como branco e se o traçado está desativado. Agora crie um círculo proporcional segurando a tecla shift enquanto desenha Para manter todos nós na mesma página, defina o tamanho dessa forma para 500. Se você estiver usando uma versão mais antiga do After Effects, poderá encontrar essa propriedade nas propriedades da camada. Aqui está. Agora, vamos selecionar essa camada e voltar para a ferramenta de seleção, para que possamos movê-la para o lado. Em seguida, duplique o círculo e mova-o para cá. Vamos fazer isso mais uma vez para que tenhamos três no total. Agora, selecione as três esferas e duplique-as novamente. Mova as duplicatas para cima na pilha de camadas e alinhe aproximadamente tudo em direção ao centro, só para saber que a quantidade exata de esferas Você pode criar quantos quiser. O que eu quero focar é na técnica principal por trás dessa configuração. Agora precisamos começar a colorir nossas esferas. Para isso, vamos abrir a pasta Assets e trazer arquivo da paleta de cores para a cena Depois de entrar, bloqueie essa camada para que ela não se mova e comece a aplicar cores nas esferas Depois terminar, duplique outra esfera, coloque-a em algum lugar no meio e mude sua cor Vamos repetir esse processo novamente para aumentar nosso gradiente. Ótimo. E agora que temos todas as nossas esferas prontas, podemos desativar a camada da paleta de cores e começar a tornar essa configuração mais interessante ajustando a escala e a posição de Tente fazer com que as esferas dos cantos sejam um pouco maiores que as demais O objetivo aqui é preencher os cantos da moldura com esferas maiores, além de manter a aparência geral aleatória o máximo possível Incrível. Agora, podemos começar a fase de animação desse gradiente. Para fazer isso, vamos abrir a propriedade de posição de uma das esferas e adicionar uma expressão de oscilação muito simples. Mantenha pressionada a tecla Alt ou Option no Mac e clique no cronômetro de posição Na caixa de expressão, digite wiggle. Dentro dos parênteses, precisamos adicionar dois valores. Vamos escrever dois para o primeiro valor, que controla a velocidade da oscilação. Quantas vezes por segundo o movimento ocorrerá. Para o segundo valor, vamos digitar 30 por enquanto. Isso controla a quantidade de movimento em pixels em todas as direções. Agora, vamos isolar essa camada para que possamos ver claramente o que está acontecendo. Como você pode ver, com essas configurações, a esfera basicamente fica próxima à sua posição original. O que queremos é que as esferas viajem por uma área maior para que o gradiente continue mudando Para conseguir isso, vamos aumentar o segundo valor. Tente configurá-lo para 100 e você verá a diferença. Parece melhor, mas agora o movimento parece um pouco rápido demais. Nesse caso, vamos desacelerar alterando o primeiro número para um. Dessa forma, a esfera se moverá mais lentamente, mas ainda percorrerá uma grande distância. Estou fazendo esses ajustes aqui para que, se você nunca usou a expressão wiggle antes, possa entender claramente como ela funciona Ao experimentar esses valores agora, você terá uma ideia muito mais clara de como controlar a velocidade e a amplitude do movimento. Tudo bem Então, quando estivermos satisfeitos com a animação, podemos clicar com o botão direito do mouse na propriedade de posição de uma esfera e escolher somente a expressão de cópia. Em seguida, selecione o restante das camadas e pressione Control V ou Command V no Mac para colar a expressão. Como essa é uma expressão de oscilação, ela fará com que cada esfera se mova aleatoriamente Mas o problema é o seguinte. Se todas as esferas usarem exatamente os mesmos valores de oscilação, a animação não parecerá verdadeiramente Para corrigir isso, vamos selecionar todas as outras esferas. Agora pressione a tecla E duas vezes para abrir a caixa de expressão e, em seguida, ajuste o segundo valor na expressão de oscilação. Em vez de 100, vamos configurá-lo para 150 para essas esferas. Dessa forma, alguns viajarão mais longe do que outros, dando-nos uma aparência aleatória muito mais natural Ótimo. Agora já parece melhor, mas deixe-me mostrar um pequeno truque secreto que muitas pessoas não conhecem. Isso fará com que seu gradiente animado pareça ainda mais dinâmico Primeiro, crie um novo objeto nulo e, em seguida, atribua todas as esferas a esse Tenha cuidado para não confundir a picareta principal e o link com o tapete de corrida Escolha Whip. Eles parecem semelhantes, mas para esta etapa, precisamos do chicote pai e do link pick Em seguida, vamos animar a rotação do objeto nulo. Em vez de adicionar quadros-chave manuais, usaremos outra expressão simples , mas poderosa Abra a propriedade de rotação do nulo, mantenha pressionada a opção Alt e clique no cronômetro, no tipo de caixa de expressão Asterisco temporal 100. Isso significa que o nulo girará 100 graus a cada segundo. Isso é um pouco rápido demais para o nosso projeto, mas eu queria mostrar como funciona. Vamos desacelerar alterando-o para o asterisco T dez. Agora, todo o grupo de esferas gira suavemente enquanto cada esfera individual ainda Essa combinação faz com que o gradiente pareça vivo. Agora vamos transformar isso em uma aparência de gradiente real. Para isso, crie uma nova camada de ajuste. Em seguida, vá para o painel de efeitos e predefinições e pesquise por Fast Box Blur Arraste-o até a camada de ajuste e aumente o raio de desfoque Vamos configurá-lo para 100 por enquanto. Percorra a linha do tempo e veja como esferas coloridas sobrepostas se misturam as esferas coloridas sobrepostas se misturam em um lindo gradiente variável. Essa é uma ótima oportunidade para ajustar a escala e a posição das esferas na cena O que eu gosto de fazer aqui é vasculhar a linha do tempo, verificar a aparência da animação em diferentes momentos e, em seguida, ajustar a escala e a posição de No momento, como você provavelmente notou, não temos nenhum fundo sólido na cena, o que faz com que o gradiente pareça incompleto Para corrigir isso. Vamos criar um novo sólido branco e colocá-lo abaixo de todas as camadas. Em seguida, ative a camada da paleta de cores e procure o efeito de preenchimento Aplique no sólido e escolha uma das cores mais claras ou mais escuras, que funcionar melhor para você Isso nos dará uma cor de fundo para combinar com nossas esferas animadas Pessoalmente, vou usar uma cor roxa brilhante, que acho muito bonita. Olhando para a configuração agora, notei que a esfera na área superior esquerda parece um pouco escura demais, então vou mudá-la para uma cor mais clara Vamos pré-visualizar novamente e ver como tudo fica junto. Nesse estágio, se você não estiver satisfeito com a aparência do seu gradiente, tente mover algumas esferas Por exemplo, acho que essa área está muito clara, então vou arrastar a esfera bege um pouco para baixo Você pode continuar ajustando as posições até obter uma aparência geral equilibrada Outro ajuste útil é abrir as expressões de oscilação nas propriedades da posição Se você perceber que certas esferas estão se movendo muito ou pouco, basta modificar seus valores de oscilação. Dessa forma, você terá controle total sobre a sensação dinâmica ou sutil do movimento do seu gradiente A ideia principal aqui é que essa configuração seja flexível. Você pode continuar refinando cores, escala, posições e configurações de oscilação até obter a aparência de gradiente animado que lhe agrada Quando estiver satisfeito com a configuração geral, acho que podemos melhorar ainda mais a aparência do gradiente aumentando o raio de desfoque Isso misturará as cores com mais suavidade. E, na minha opinião, o resultado parece muito melhor. Agora que mostrei todas as etapas diferentes que você pode seguir para refinar seus gradientes, passarei alguns momentos recolorindo as esferas até encontrar uma aparência que eu realmente goste No meu caso, quero que o gradiente se incline mais para um tom roxo do que para um amarelado Então, vou ajustar as cores da esfera de acordo. Tudo bem, agora estou satisfeito com o resultado. Antes de prosseguir, vamos copiar o nome dos efeitos e colá-lo na camada de ajuste. Então, sempre lembraremos para que essa camada de ajuste é usada. Neste estágio, já que terminamos com o gradiente e gostamos de sua aparência, definitivamente não queremos deixar todas essas camadas dentro da composição principal Vamos pré-compor todos eles em uma única pré-composição. Vamos chamá-lo de fundo gradiente. Verifique se as duas opções estão marcadas na caixa de diálogo e clique em OK. Agora, no painel Projeto, arraste a pré-composição recém-criada para a pasta PreComps para manter tudo Também mudarei a cor do rótulo para a tempestade de areia padrão Ele parecia azul anteriormente porque foi criado dentro da composição principal, que eu tinha colorido de azul Tudo bem. Agora, quero mostrar algo muito importante ao trabalhar em projetos complexos. Uma das principais preocupações em projetos como esse é garantir que o After Effects funcione sem problemas, tanto na visualização quanto na renderização tanto na visualização quanto na No nosso caso, se você usar a pré-composição original desse fundo gradiente animado em todo o projeto, ela será muito pesada no After Effects, diminuindo a velocidade das visualizações Em vez disso, o que precisamos fazer é renderizar essa animação uma vez e, em seguida, usar a versão renderizada do gradiente sempre que necessário no projeto Deixe-me mostrar exatamente como fazer isso. Primeiro, vamos inserir a pré-composição dessa animação. Em seguida, definiremos as configurações de cores em nosso projeto no máximo. Neste momento, eu não quero que você faça nada. Assista e ouça. Quero mostrar dois formatos diferentes de alta qualidade que você pode usar para renderização O primeiro é extremamente pesado, então eu não recomendo realmente usá-lo, mas vou mostrá-lo para que você entenda a diferença entre os formatos. Não se preocupe, avisarei você quando for a hora de voltar e me acompanhar enquanto renderizamos o segundo formato. Então, digamos que você saiba que esse plano de fundo precisa ser renderizado com a mais alta qualidade possível Nesse caso, iríamos para o módulo de saída, escolheríamos QuickTime como formato e , dentro das opções de formato em Codec de vídeo, selecionaríamos animação ou uma das resoluções Apple ProRes Por enquanto, vamos com a animação. Agora, vou escolher um local para salvar essa renderização e apertar o botão de renderização. Tudo bem A renderização está concluída. Como você pode ver, demorou quase 5 minutos. No seu computador, isso pode depender mais ou menos do seu hardware. Mas aqui está a lição importante. Em vez de usar a pré-composição original dessa animação de gradiente, agora usamos o arquivo renderizado After Effex lida com a filmagem com muito mais eficiência do que uma pré-composição pesada, as visualizações e as renderizações finais serão muito No entanto, como mencionei, esse formato é muito pesado. Se você não tiver muito espaço livre no computador, renderize-o como um arquivo MP four de alta qualidade em vez de um arquivo MOV Dessa forma, você ainda obterá ótima qualidade, mas com um tamanho de arquivo muito mais leve. Então, agora vamos fazer isso juntos. Você pode voltar ao After Effects e me acompanhar enquanto renderizamos o segundo formato mais leve. Então, mais uma vez, vamos abrir a pré-composição original. Desta vez, alteraremos a profundidade da cor para 16 bits. Agora pressione Control ou Command mais M para enviá-lo para o Render Q. Dentro do módulo de saída, escolha h.264 É um arquivo MP 4. Nas opções de formato, você verá a taxa de bits alvo, que é definida como 15 megabits por segundo por padrão Você pode aumentar isso para algo maior, como 35 ou 45, para obter melhor qualidade ou, se preferir, basta escolher um dos modelos prontos que já definem a taxa de bits para você. Vou escolher renderizar isso na minha pasta de ativos, mas você deve renderizá-lo na pasta separada que pedi que você criasse anteriormente para seus próprios arquivos. Finalmente, aperte o botão de renderização. Quando a renderização estiver concluída, excluirei o arquivo MOV antigo e importarei a nova versão MP quatro do fundo gradiente animado para o nosso projeto Você pode usar o arquivo que acabou de renderizar ou o que eu incluí na pasta Assets Ótimo. Agora, como você pode ver, o arquivo MP four é muito mais leve, mas a qualidade ainda é perfeita para o restante do projeto. Se eu colocá-lo na linha do tempo, parece idêntico à pré-composição original A única diferença é que agora o After Effects pode lidar com isso com muito mais eficiência, o que tornará a visualização e a renderização do projeto final mais rápidas e fáceis E com isso, terminamos esta lição. Vamos salvar o projeto mais uma vez antes de prosseguir. Na próxima lição, criaremos a placa de vídeo antes de iniciar a animação real. Você verá por que ter uma placa de vídeo pronta é tão importante. Isso nos poupará muito tempo e tornará o processo de animação muito mais fácil. Vai ser incrível. Então, nos vemos na próxima. E antes de começar a assistir à próxima aula, não se esqueça de fazer uma pausa de dez minutos para se refrescar antes de continuarmos Nos vemos na próxima. 10. Como criar o videobank para sincronização da cena: Volte, agora podemos trazer de volta as configurações de cores para oito BPC Voltaremos para 16 quando terminarmos essa animação e precisarmos renderizar a versão final. Enquanto isso, nesta lição, criaremos a placa de vídeo, que é uma etapa muito importante na criação qualquer vídeo ou animação com várias cenas Junto com a narração, ela nos ajudará a determinar quanto tempo cada cena deve durar, que será muito útil na fase de animação, para que saibamos quantos segundos cada cena deve E para fazer isso, vamos encontrar o storyboard que preparei anteriormente para o projeto, porque usaremos os quadros do storyboard para criar a placa de vídeo Como queremos que todas as camadas, podemos selecionar a composição, reter o tamanho da camada e, em seguida, escolher combinar os estilos de camada com a gravação O que realmente não importa, porque não temos nenhum estilo de camada nessas camadas do Photoshop Tudo bem, podemos colocar a pasta com as camadas dentro da pasta de ativos E agora vamos inserir a pré-composição que obtemos ao importar o Por enquanto, podemos desativar todas as camadas aqui, exceto a camada de fundo, e podemos bloqueá-la para que ela não interfira no processo. Ótimo. Agora vamos importar a narração para o projeto também Se você recebe uma narração do cliente ou a gera você mesmo, não importa O mais importante é ter qualquer narração que você possa usar ao criar a placa de vídeo e iniciar a animação do projeto real, mesmo que seja apenas uma narração simples criada com IA ou É muito importante criar uma narração inicial para que você saiba aproximadamente onde cada cena precisa começar e Então, agora vou mostrar como fazer isso totalmente de graça. O site que eu costumo usar, seja para uma narração inicial ou final, que eu realmente usarei no projeto, é chamado vi dot Você pode se inscrever rapidamente usando sua conta do Gmail. Vou fazer login porque já me inscrevi com minha conta do Gmail No momento em que estou gravando este curso, essa plataforma permite que você crie alguns minutos de Voiceover gratuitamente Talvez quando você ver esta lição, eles tenham mudado o pacote gratuito, e ele não é mais gratuito, mas de qualquer forma, isso não deve ser um problema, porque tenho certeza de que é muito fácil encontrar ferramentas gratuitas que podem gerar dois ou 3 minutos de narração sem nenhum custo Eu insisto fortemente que você crie uma narração antes de iniciar Isso evitará muitas revisões e dores de cabeça a longo prazo Tudo bem. Então, uma vez que estamos logados no site, é muito fácil de usar Vou clicar aqui para criar um novo projeto. Em seguida, vou escolher o tamanho da minha tela. No meu caso, usarei a resolução full HD. Em seguida, para a cor de fundo, escolherei verde, porque também criarei legendas neste vídeo Quando o fundo estiver verde, será muito mais fácil efeitos de codificação no After removê-lo usando um dos efeitos de codificação no After Effects Tudo bem. Agora, para criar a narração, vou para a seção de áudio e selecionarei o recurso de conversão de texto em fala Em seguida, vou até o roteiro e copiarei todos os textos que tenho aqui. Em seguida, vou colar na caixa de texto. E, como você pode ver, há um limite para a quantidade de texto que eu posso usar ao mesmo tempo. A próxima etapa é escolher a voz certa para minha narração Nesta parte, vou acelerar as coisas. Tudo o que estou fazendo é apenas jogar e testar para descobrir qual será a melhor escolha para meu vídeo. Tudo bem. Então, depois de testar todas as vozes, eu finalmente escolhi a que eu mais gostei. Agora vou selecioná-lo e clicar em Gerar. Esse processo pode levar alguns minutos. Tudo bem. Então, a narração está pronta Vou mudar o nome desse projeto e agora posso ouvir o que tenho. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens. E antes que você perceba, você está se afogando no caos, procurando ajuda Conheci um ponto. A plataforma que torna o gerenciamento de projetos tão simples. Até seu gato poderia fazer isso. Com o One Point, você tem uma visão geral clara de tudo em que sua equipe está trabalhando. Todos os seus projetos, todas as suas tarefas, tudo em um só lugar. Como você pode notar, às vezes ouvimos pausas longas ou nenhuma pausa Nessa situação, vou ajustar meu texto um pouco. Ao alterar os sinais de pontuação no texto, a IA alterará ligeiramente a versão da narração Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens. E antes que você perceba, você está se afogando no caos, procurando ajuda Conheci um ponto. A plataforma que torna o gerenciamento de projetos tão simples. Tudo bem, isso soa melhor. Mas eu decidi mudar a voz para outro artista. Gerenciando uma grande equipe em vários projetos. Nesse caso, tudo o que preciso fazer é encontrar o artista que eu quero e clicar em Regenerar Ótimo. Então, quando eu estiver satisfeito com a narração, a próxima coisa que farei é adicionar legendas da narração no vídeo Eu faço isso porque isso me ajuda mais tarde no After Effects a entender do que a cena está falando, mesmo que eu não ouça a narração É apenas uma pequena coisa que adoro fazer quando trabalho em projetos com dublagem Tudo bem se você não entender completamente do que estou falando. Quando começarmos a trabalhar nisso em alguns minutos, tudo ficará muito mais claro para você Aqui no lado esquerdo, eu posso ajustar o texto se eu encontrar alguns erros. Tudo bem. Então, quando eu estiver bem com as legendas, reduzirei o tamanho da fonte e verificarei tudo novamente antes de baixá-la Ok, então estou pronto para baixá-lo. Para isso, clicarei em Download e verificarei se a qualidade está definida como HD e se as legendas gravadas estão verificadas Agora vou clicar em Exportar vídeo e esperar alguns minutos. Feito isso, clicarei no ícone Download e escolherei baixá-lo como um arquivo MP four porque quero ver as legendas Se você não quiser legendas em sua narração, você pode baixá-las como um arquivo MP três e usá-las em seu projeto. Tudo bem? Vamos arrastar a narração para o nosso projeto. Agora vamos trazer o MP do arquivo para nossa linha do tempo e começar a criar a placa de vídeo A primeira coisa que precisamos fazer é remover a tela verde para que possamos ver as legendas e as camadas da placa de vídeo Para isso, vamos ao painel Efeitos e procuraremos o efeito de luz principal. Agora, tudo o que precisamos fazer é selecionar o conta-gotas da cor da tela e clicar na cor verde Incrível. Então, agora vamos começar a criar a placa de vídeo. A primeira coisa que adoro fazer ao criar a placa de vídeo é deslocar todos os quadros do storyboard, um após o outro na linha do Para fazer isso rapidamente, vamos selecionar todas as camadas. E agora vamos para o quadro dez e recorte as camadas até esse ponto. Agora, para compensar todas as camadas de uma vez, é importante iniciarmos a seleção a partir da primeira camada que queremos que seja no início da linha do tempo No nosso caso, é a camada número um. Então selecione-o, mantenha pressionada a tecla Shift e selecione a última camada. Agora, clique com o botão direito do mouse, vá para o Keyframe Assistant e selecione camadas de sequência e, em seguida, clique em OK Como você pode ver, todas as nossas camadas agora estão deslocadas uma após a outra, começando pela primeira camada que selecionamos Agora, às vezes o primeiro deslocamento não é o que você precisa porque a duração de cada camada é muito curta ou muito longa. No nosso caso, dez quadros para cada camada são muito curtos, então vamos desfazer o que fizemos e repetir esse processo mais uma vez, mas desta vez, defina a duração de cada camada para 1 segundo Agora, podemos começar a trabalhar no ajuste de cada camada de acordo com o script E como podemos ver as legendas abaixo, nem precisamos ouvir o roteiro Podemos simplesmente seguir o texto para saber quais quadros devem ser exibidos em cada momento específico. É por isso que adoro adicionar legendas às minhas dublagens. Na renderização final, posso simplesmente desligar a camada das legendas para não vê-las, mas ainda assim ouvirei a Mais tarde, você entenderá exatamente o que quero dizer. Agora vamos nos concentrar em ajustar as durações das camadas de acordo com a narração Então, de acordo com a narração, eu entendo que, neste momento, a primeira cena deve terminar e a segunda deve Isso significa que precisamos ajustar os quadros que descrevem a primeira cena até esse momento. Agora, podemos selecionar todos os quadros que criam a primeira cena e encurtar sua duração Depois disso, podemos usar a função de camadas de sequência mais uma vez para que elas sejam deslocadas uma após a outra sem que precisemos movê-las manualmente. Como você deve entender, precisaremos usar essa função várias vezes ao criar storyboards ou qualquer outra animação em que estejamos trabalhando Agora, quero te ensinar algo importante para se tornar um designer de movimento mais avançado, criando atalhos personalizados para ações que ainda não têm atalhos Por exemplo, não temos um atalho para essa função. Então, vou mostrar como podemos criar um atalho personalizado para isso Usando essa oportunidade. Eu quero te ensinar o processo de criação de um novo atalho Você não precisa fazer isso para essa função. Você pode criar um para qualquer função que quiser, e eu vou te mostrar como. Primeiro, vá para Editar e clique nos atalhos do teclado. Aqui você pode ver que estamos usando predefinição padrão de atalhos do After Effects Depois de criarmos um atalho, ele mostrará que você está usando um personalizado. Em seguida, verifique se o idioma está definido como inglês. Agora, tudo o que precisamos fazer é digitar a ação na barra de pesquisa. No nosso caso, podemos escrever uma sequência. E se rolarmos para baixo, veremos a função de camadas de sequência na seção de animação. Para criar um atalho, basta clicar aqui ao lado do nome no menu de atalho e escolher as teclas desejadas Podemos iniciar o atalho com Controle ou Comando no Mac. Agora podemos ver todas as teclas disponíveis que podemos usar coloridas em cinza. O que está em roxo significa que já está em uso e não podemos usá-lo. Para abrir mais teclas disponíveis, podemos adicionar outra tecla à nossa nova combinação de atalhos Por exemplo, podemos usar a tecla shift junto com a tecla control. Agora, como você pode ver, temos muito mais chaves disponíveis para usar. Adoro usar as teclas numéricas porque são mais fáceis de lembrar. Como você pode ver, o número um já está ocupado, então vamos usar o número dois. Feito isso, vamos começar a selecionar os quadros da primeira cena, começando pela camada um e depois usar nosso atalho recém-criado, que é Control Shift dois E aí está. O atalho está funcionando Agora podemos trabalhar com as legendas da narração e entender onde terminar o último quadro que pertence à primeira cena OK. Então, a segunda cena começa aqui. Então, agora podemos trazer a camada sete até esse ponto no tempo. Agora vamos ver o que temos na próxima camada. Se lermos as legendas, veremos que camada número oito não deve começar logo após a camada sete De acordo com as legendas, essa cena deve começar a partir desse momento Um pouco depois do sétimo segundo, isso significa que a cena representada na camada sete deve durar até o momento em que a camada oito começa. Vamos ver o que temos até agora. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando em um. Parece que acertamos tudo Basicamente, ao usar esse método com as legendas, não temos espaço para erros Tudo está super claro. Vamos seguir em frente e tentar praticá-lo mais uma vez. Agora vamos selecionar todas as camadas após camada oito e movê-las posteriormente na linha do tempo Então, podemos ver onde a próxima cena deve começar e terminar. E antes que você perceba, você está se afogando no caos, procurando ajuda Atendido para que você entenda, acordo com a narração, quando ouvimos conhecer um ponto, precisamos apresentar o logotipo Isso significa que precisamos começar a camada dez um pouco mais cedo. Agora, vamos ver o que precisamos fazer antes que isso aconteça. Neste momento, vemos, acordo com as legendas da narração, que é uma cena em que precisamos apresentar a cena de busca por ajuda Então, vamos expandir o início da camada nove. Então, começa a partir daqui. Finalmente, podemos expandir a camada oito para terminar neste ponto. Ótimo. Então, agora vamos continuar com as próximas cenas. Ok, então aqui está o momento no Voiceover, falando sobre a plataforma Em nosso storyboard, é a camada em que vemos o painel da plataforma pela primeira vez Isso significa que precisamos iniciar a camada número 11 a partir desse momento. Vamos mover todas essas camadas para a direita por enquanto e expandir a cena anterior até esse momento. Agora, podemos trazer a camada 11 para começar a partir daqui. Ótimo. Agora vejo que, de acordo com as legendas da narração, a cena do gato deve começar neste momento Então, agora vou tentar colocar a cena do gato começando de algum lugar por aqui. Isso significa que podemos expandir a cena anterior até este ponto. Ok, espero que você esteja começando a entender a ideia de criar uma placa de vídeo junto com a narração e como isso facilita o processo quando temos legendas ao longo do caminho para nos guiar Ok, agora vamos continuar ajustando as camadas do storyboard de acordo com o tempo da narração Nos casos em que as coisas ficam um pouco complicadas e não conseguimos encaixar as camadas na narração, o que eu adoro fazer é encontrar uma cena em que eu tenha uma animação de texto e alinhá-la com Como você pode ver, temos uma cena com uma animação de texto que diz “N” na imagem completa. Então, agora vou ignorar todo o resto e continuar assistindo as legendas para descobrir onde essa frase começa na narração Como você pode ver, começa em algum lugar por aqui no segundo 22 ou 23. Então, agora vou voltar e selecionar todas as camadas a partir da camada 17 e arrastá-las para começar a partir desse ponto no tempo, que foi o final do 22º segundo Agora, tudo o que preciso fazer é ajustar o tempo acordo com as legendas para que caiba perfeitamente Ótimo. Agora, podemos trazer a camada 16 aqui para a direita e a camada 14 aqui para a esquerda e ver o que está acontecendo no meio. Sei que, no momento da narração, quando ouvimos uma visão geral cristalina, precisamos já apresentar a tela da interface do usuário do projeto Então, podemos começar essa camada a partir daqui e arrastá-la para a direita. Agora vamos ver onde precisamos terminar a cena. Eu sei que meu próximo quadro está mostrando a cena da tarefa. Agora vou ler as legendas e ver onde essa parte começa na narração Começa aqui, então isso significa que camada 16 precisa começar aqui. E isso significa que a camada 15 precisa terminar aqui. Ótimo. Agora podemos continuar com as próximas cenas e, a partir de agora, será muito fácil porque temos muitas cenas com animações de texto Isso facilita a combinação da narração com essas cenas enquanto lemos as legendas Por exemplo, para ver onde a cena da pergunta deve terminar, tudo o que precisamos fazer é verificar as legendas da narração, onde o texto da próxima cena começa Como você pode ver aqui nas legendas da narração, não vemos mais Isso significa que podemos colocar 17 camadas neste momento, por enquanto. Agora, vamos mover todas as camadas para a direita e ver onde a próxima cena começa. Preste atenção apenas nas legendas da narração. Como você pode ver, vemos o texto que cada projeto inclui. Isso significa que, neste momento, podemos começar a próxima cena e a cena da pergunta exatamente aqui. Agora, vamos trazer a camada 18 para começar a partir daqui. Ótimo. E agora, para saber onde essa cena deve terminar, tudo o que precisamos fazer é ver onde a próxima cena de texto da pergunta começa de acordo com as legendas da narração Então, agora, foque nas legendas somente até ver o momento em que a pergunta está começando Aqui está no segundo 37. Então, agora vamos selecionar todas as camadas da camada chamada camada 19, que apresenta a cena da pergunta e, em seguida, movê-las todas para começar a partir da segunda 37. Agora, para ver onde a cena da pergunta deve terminar, continue focando apenas nas legendas da narração para ver onde a narração termina dizendo que está ficando para trás continue focando apenas nas legendas da narração para ver onde a narração termina dizendo que está ficando para trás . Aqui está. Portanto, expanda o quadro do storyboard da cena da pergunta até esse momento Ótimo. Feito isso, agora podemos selecionar o restante das camadas e iniciá-las a partir do final da anterior. Como você pode ver, ele combina as legendas da narração e o texto que precisa ser exibido na cena neste momento Incrível. Então, agora podemos voltar à cena anterior antes da pergunta e expandir o quadro até o ponto no tempo em que a cena da pergunta começa. Ótimo. Agora eu vejo, de acordo com o quadro do meu storyboard, que a próxima cena é uma cena de perguntas Isso significa que agora vou evitar todo o resto e me concentrar apenas nas legendas da narração para ver onde a narração ver onde a narração Aqui está no segundo 42. Então, agora tudo o que precisamos fazer é trazer todas as camadas da camada 21 para começar a partir da marca de 42 segundos. Depois disso, podemos estender camada 20 para terminar nesse momento. Então, agora, para ver onde a cena da pergunta termina, preste atenção nas legendas do storyboard para ver onde não vemos mais a pergunta. Aqui está. Então, vamos mover todo o resto das camadas para começar daqui e depois terminar a camada 21 neste momento. Incrível. Vamos continuar trabalhando. Vejo que a próxima cena está perfeitamente alinhada com a narração Como o texto que vejo que precisa ser apresentado na cena coincide com as legendas da narração Agora eu continuo focando apenas nas legendas da narração e vejo do que a próxima cena está falando Nesse caso, estamos falando sobre o sistema de mensagens. No nosso caso, o início da cena está bem. Mas agora precisamos descobrir onde essa cena termina. Para isso, vamos nos concentrar em qual deve ser a próxima cena de acordo com o storyboard Como você pode ver, agora vemos uma cena com a tela da interface do usuário do navegador de arquivos na qual uma pessoa pode compartilhar arquivos. Com isso em mente, agora precisamos voltar e focar apenas nas legendas da narração e ver onde a narração começa a falar sobre focar apenas nas legendas da narração e ver onde a narração começa a falar sobre essa parte. Aqui está. Como você pode ver, a narração diz compartilhamento, que significa que a cena do navegador de arquivos deve começar a partir daqui Então, vamos agora fazer que as camadas comecem a partir desse momento. Ótimo. E agora vamos voltar a lidar com a parte anterior. De acordo com o quadro do storyboard, vejo que mostra uma cena sobre um lembrete rápido e vejo claramente que as legendas não falam sobre Então, vamos nos concentrar nas legendas da narração para ver onde a narração começa a falar sobre a parte rápida falar sobre Aqui está no segundo 50. Então, vamos trazer o quadro do storyboard dessa cena para começar a partir daqui Ótimo. Então, agora podemos expandir a camada 23 para terminar onde a camada 22 começa e, em seguida, expandir a camada 22 para terminar onde a camada 23 começa. Então, agora, de acordo com o storyboard, vejo que a próxima cena está apresentando uma pergunta Agora vou me concentrar nas legendas da narração e ver onde a narração começa a falar sobre ela Aqui está. Está começando por volta da marca do primeiro minuto. Isso significa que agora precisamos selecionar as camadas a partir da cena da pergunta e todas elas comecem a partir da marca de 1 minuto. Feito isso, agora podemos expandir a camada 24 para terminar naquele momento. OK. Então, agora vamos verificar a cena final. Os quadros do storyboard e as legendas da narração parecem combinar perfeitamente, então não precisamos fazer A única coisa que podemos fazer é inserir o último quadro do storyboard no momento em que a narração termina Tudo bem. Então, quando terminarmos o cronograma, agora podemos encurtar a área de trabalho até o final da narração e verificar se tudo está de acordo O storyboard emoldura com a narração. Então, vamos dar uma olhada no que temos. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos, procurando ajuda. Conheci One Point. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com o One Point, você tem uma visão geral clara de tudo em que sua equipe está trabalhando, todos os seus projetos, de todas as suas tarefas, tudo em um só lugar. Preciso da imagem completa. Cada projeto inclui tarefas detalhadas, subtarefas e acompanhamento do progresso em tempo real, para que nada passe despercebido Quer ver quem está ficando para trás, acesse a guia da sua equipe para ver as atividades de todos em um piscar Preciso entrar em contato com alguém. Entre no sistema de mensagens integrado, onde todas as suas conversas são organizadas por contato. Envie um lembrete rápido ou compartilhe uma atualização instantaneamente. E sim, compartilhar arquivos é fácil. upload de qualquer documento e toda a sua equipe terá acesso a ele imediatamente. Então, por que continuar lutando? Acesse onepoint.com e torne seu dia de trabalho mais fácil a partir de Gerenciar uma grande equipe Ótimo. Tudo parece perfeito. E agora estamos prontos para passar para a próxima lição, onde começaremos a animar a primeira cena Vai ser super divertido. Então nos vemos lá. 11. O fluxo de trabalho de animação correto: Volte. Antes de começarmos a animar as cenas, é importante que eu explique o fluxo de trabalho correto É muito simples de entender. Primeiro, quero que você trabalhe com macro. Isso significa que eu quero que você primeiro termine de animar as cenas sem entrar muito nos detalhes do design A parte mais importante é primeiro terminar de criar uma boa animação que se encaixe perfeitamente na narração Essa é a parte mais importante. Somente quando você tiver isso para todas as cenas, poderá começar a trabalhar micro. Ou seja, entre em cada cena e adicione recursos de design adicionais e comece a colorir e projetar as cenas e adicionar efeitos especiais como desfoques, brilhos e Esse método não apenas acelera a execução do projeto e, o mais importante, o prepara para ajustar a animação à narração, mas também economiza muito tempo a longo prazo, evitando ajustar o design 1 milhão de evitando ajustar o design Portanto, lembre-se de dividir seu fluxo de trabalho em duas partes. Primeiro, trabalhe com macro nas coisas mais importantes e só então comece a trabalhar com o Micro ajustar os detalhes do design Lembre-se disso durante todo o curso e preste atenção em como vamos animar a próxima cena antes de finalizar o design da anterior Tudo bem? Então, começaremos esta lição criando e animando a primeira cena A primeira coisa que precisamos fazer antes de animar qualquer cena que inclua narração é ver qual deve ser a duração dessa No nosso caso, depois de criar a placa de vídeo, podemos ver claramente quando a cena começa e quando ela deve terminar antes que a próxima comece. Como você pode ver, a primeira cena termina aqui, então isso significa que precisamos que a animação da cena dure no máximo 4 segundos. Saber qual é a duração de uma cena pode evitar muitos ajustes de tempo em um futuro próximo. Esse é um dos benefícios importantes de ter uma placa de vídeo. Tudo bem. Para começar, vamos primeiro trazer o arquivo Voiceover MP four para a pasta Assets E agora vamos pressionar Control ou Command N para criar uma nova composição. Vamos nomear essa cena de competição como uma. Há várias maneiras de animar essa cena. E desta vez, quero dar uma dica rápida para animar cenas em que temos um movimento lateral, como fazemos na primeira cena Quando lido com esse tipo de cena, adoro criar uma composição ampla e, depois disso, animar a composição para os lados, se necessário Eu abordei essa técnica em meu curso Transition Mastery, no qual aprendemos várias formas e técnicas para diferentes tipos de transições e vídeos explicativos Tudo bem, então para ter uma composição ampla, podemos multiplicar a largura por dois Em seguida, durante todo o período, podemos deixá-lo em 2 minutos por enquanto. Ótimo. Então, agora temos uma composição ampla na qual podemos inserir todo o texto que precisamos animar na cena Então, vamos abrir o script e copiar o texto relevante. Back and After Effects, selecione a ferramenta de texto, clique uma vez para abrir uma linha de texto e colar o texto. Agora, vamos ajustar o texto para se adequar às diretrizes de design da empresa. No nosso caso, a fonte principal da empresa são os pop-ins. Caso não tenha certeza, você sempre pode pedir ao cliente que confirme e envie a fonte relevante para que você possa instalá-la em seu dispositivo. No nosso caso, é uma fonte gratuita que você pode baixar do Google Fonts. Você também pode encontrar a fonte em meus ativos. Se você não tiver essa fonte instalada em seu dispositivo, salve o projeto, feche-o e instale a fonte. Somente depois disso, reabra o projeto e continue trabalhando. Tudo bem, de volta ao projeto. Vou encontrar a fonte. Agora vou redefinir minhas propriedades de texto. Vamos definir o tamanho da fonte para 100 por enquanto. Em seguida, verifique se o parágrafo está centralizado e, em seguida, você pode alinhar a camada ao centro da composição Ótimo. Agora podemos começar a animar a cena Mas antes disso, vamos deletar o ponto que temos no texto. Em vídeos de animação, não é comum usar pontos em cenas de animação de texto Incrível. Agora podemos ir até a placa de vídeo e verificar novamente o que precisa acontecer na cena Minha abordagem para essa animação será dividir o texto em várias partes e animá-las uma após a outra, sem me preocupar com o tempo entre elas Depois de criar a animação para cada parte, moveremos as camadas e os quadros-chave para ajustar o tempo Ok, vamos voltar à cena e começar a prepará-la para a animação. Tudo bem. Então, a primeira coisa que podemos fazer é usar essa camada como camada de referência porque precisamos ter algumas animações de tipo de texto diferentes E é uma boa ideia ver onde cada palavra deve ser colocada. Podemos duplicar essa camada agora e bloquear a referência. Vamos trazer a opacidade aqui de volta para 100. Ótimo. Agora, como precisamos criar diferentes tipos de animações para o texto, vamos começar a dividir o texto em algumas camadas separadas para Para começar a fazer isso, primeiro, vamos duplicar nossa camada de texto Agora vamos garantir que, nessa camada, vejamos apenas a primeira parte do texto. Vamos selecionar o texto do múltiplo de palavras até o final da frase e excluir essa parte. Feito isso antes de passar a dividir o texto novamente, vamos agora colocar nossa primeira parte do texto na posição correta Nesse caso, precisamos mover essa camada para a esquerda. Essa será a parte em que usaremos animadores de texto para animar esse No restante do texto, vamos animar quase cada palavra separadamente. Com isso em mente, vamos selecionar essa camada de texto e excluir a primeira parte do texto, incluindo a palavra múltipla. Já que vamos animar essa palavra separadamente mais tarde. OK. Então, agora podemos isolar essa camada de texto para focar nela Agora, vamos duplicar essa camada. E desta vez, certifique-se de que, nessa camada, tenhamos apenas a palavra projetos. Ótimo. E então vamos isolar essa camada e garantir que ter aqui apenas o texto não seja fácil Incrível. Então, agora vamos trazer de volta todas as camadas e organizar a posição de nossas novas partes de texto de acordo com a camada de referência. Tudo bem, neste ponto, podemos selecionar todas as camadas e centralizar seus pontos de ancoragem Para isso, mantenha pressionada a tecla Control ou command e clique duas vezes na ferramenta AnchorPoint Ótimo. Então, agora vamos lidar com a parte mais complicada dessa animação de texto, que é a palavra múltiplo. Vamos selecionar essa camada, duplicá-la, colocá-la no lugar certo e alterar o texto para múltiplo Ótimo. E agora vamos marcar essa camada uma cor diferente para que possamos diferenciar as camadas com mais facilidade Agora, vamos começar a lidar com essa animação primeiro, já que é a parte mais complexa dessa cena. Para focar melhor nessa camada, vamos isolá-la e evitar todas as outras camadas além da camada de referência Também podemos isolá-lo para ter uma visão clara de onde a animação final dessa palavra deve terminar. OK. Então, agora precisamos dividir todos os caracteres dessa palavra em camadas separadas. Existe uma ferramenta paga para isso, caso você queira tornar esse processo um pouco mais rápido. Vou deixar um link para isso na descrição. Mas, no meu caso, eu não faço esse tipo de animação com muita frequência. Então, eu não preciso dessa ferramenta. Estou bem fazer isso manualmente. Então, vamos duplicar essa camada sete vezes. Então, no total, teremos oito camadas, cada camada para um caractere dessa palavra. Agora vamos garantir que cada camada tenha apenas um caractere dessa palavra. Incrível. E agora, usando a ferramenta de seleção, vamos colocar todas as camadas na posição correta. Ótimo. Então, com isso feito, podemos começar a animar as camadas Primeiro, vamos selecionar todos eles e depois ir para o segundo. Quando não sei qual deve ser a duração da animação, geralmente crio uma animação de 1 segundo. Depois disso, ajusto a duração e o tempo, se necessário. Ok, agora vamos pressionar P e criar um quadro-chave para a propriedade de posição para todas as camadas neste momento, pois sabemos que, no final da animação, elas precisam estar localizadas aqui Em seguida, vamos ver 15 quadros mais cedo e começar a espalhar as camadas aleatoriamente. Feito isso, vamos ao início da animação e posicionaremos as camadas onde queremos que elas comecem. No nosso caso, vamos fazê-los sair do centro. Então, vamos trazê-los todos para aproximadamente o mesmo local. Incrível. Então, quando terminarmos a animação da posição, vamos seguir em frente e animar a rotação Primeiro, sabemos que, no final, todos devem estar como estão agora e, no meio dessa animação, começaremos a girar cada personagem aleatoriamente Finalmente, no início desta animação, podemos copiar os últimos quadros-chave e colá-los aqui. Ok, está começando a ficar um pouco mais interessante. Então, agora vamos torná-lo ainda mais interessante adicionando uma animação em escala. No final, a balança deve estar como está agora. No meio da animação, vamos definir a escala para, digamos, 150. E, no início, como queremos criar uma animação pop-up, vamos definir a escala para zero para todas as camadas. Ótimo. E agora vamos garantir que nenhuma camada esteja selecionada e pressionar você para ver todos os quadros-chave que criamos e começar a melhorar o movimento Primeiro, vamos selecioná-los e converter todos os quadros-chave em quadros-chave do Easy Ease Em seguida, vamos ao editor gráfico e verificamos se estamos usando o gráfico de velocidade. Agora, vamos ampliar um pouco para que possamos ver o que estamos fazendo e começar a ajustar a velocidade da animação Isso é ajustar a velocidade. Quero que a animação comece rápido. Então, vamos selecionar todos os quadros-chave do meio e mover suas alças para a esquerda Agora eu quero que as camadas fiquem um pouco no ar. Ou seja, quero que a animação no meio seja um pouco mais lenta Então, vamos mover essas alças para a direita. Agora, o movimento aqui será mais lento. Ótimo. Então, com isso feito, vamos sair do editor gráfico e continuar melhorando a animação. Neste ponto, o que eu adoro fazer é criar um pequeno atraso entre as camadas. É sempre uma boa ideia quando você tem várias camadas que fazem praticamente a mesma animação. Ok, então vamos começar selecionando todas as camadas após a primeira e compensando-as por, digamos, dois quadros Agora, segure o comando do controlador, clique na segunda camada para desmarcar e mova esses 12 quadros Vamos fazer isso com o resto das camadas. Como você pode ver, parece melhor. Mas agora vou desfazer minhas ações e mostrar como você pode atrasar as camadas muito mais rápido Você também pode fazer isso se estiver usando a versão mais atualizada do After Effects. Essa é a razão pela qual estou usando a versão Beta. Quando gravei esse curso, essa função só estava disponível na versão Beta. Ok, então, para fazer isso, primeiro precisamos começar a selecionar as camadas da camada com a qual queremos que o atraso comece. No nosso caso, a primeira camada que precisamos selecionar é a letra M. Em seguida, podemos segurar a tecla Shift e selecionar a última camada. Agora, mantenha pressionada a tecla Ctrl Alt ou comande uma opção no Mac. E, como você pode ver, o cursor muda para o novo ícone do recurso de atraso. Isso significa que agora podemos arrastar as camadas para a direita e obter um atraso proporcional Você pode ampliar e colocar o indicador de tempo no quadro um e, em seguida, arrastar as camadas para que a segunda camada seja colocada aqui. É assim que você pode saber que o atraso é exatamente de um quadro. Claro, você pode fazer o atraso que quiser. Mas para esta lição, acompanhe o que estou fazendo. Tudo bem, então o atraso parece bem legal, e agora podemos melhorar ainda mais a animação adicionando um movimento pop-up adicional. Para fazer isso, vamos criar um novo objeto nulo. Agora vamos ficar em algum lugar após o término da animação. Você pode ver onde está verificando o último quadro-chave da última camada. No nosso caso, está em algum lugar por aqui. Em seguida, coloque o nulo no centro da palavra e, depois disso, selecione todas as camadas e coloque-as no nulo Agora, usando esse nulo, podemos adicionar uma animação em escala secundária a todas as camadas que temos aqui Vamos criar um quadro-chave com o valor atual no início Depois disso, vamos até algum ponto no meio da animação e escalemos o nulo para, digamos, 120 Vamos verificar se não é demais. Ok, parece bom. Agora vamos a um ponto no tempo em que a animação quase termina e definamos a escala para 80. E, finalmente, vamos fazer alguns quadros após a conclusão completa da animação e trazer a escala de volta para 100. Isso criará uma animação pop interessante. Agora podemos facilitar os quadros-chave e ver como ficam. Neste momento, adoro assistir à animação algumas vezes e ver o que posso ajustar. Na minha opinião, podemos trazer o quadro-chave final um pouco mais cedo para ter um movimento mais rápido. E também podemos fazer com que o primeiro quadro-chave comece no, digamos, quadro dez Sim, acho que fica muito melhor assim. Ótimo. Então, agora podemos continuar animando as próximas partes de texto da cena Antes de prosseguir, podemos marcar o nulo com a mesma cor das várias camadas de texto Dessa forma, saberemos que todas essas camadas pertencem à mesma parte do texto. Tudo bem. E agora vamos animar a primeira parte do texto. Vai ser muito mais fácil porque vamos animá-lo usando animadores de texto Caso você não saiba o que é isso, sugiro que assista ao meu curso, texto e movimento, no qual abordo o mundo da animação de texto no After Effects. Tudo bem. Para começar, vamos abrir as propriedades do texto e adicionar um novo animador Vamos começar adicionando a propriedade position ao nosso animador de texto Agora vamos ao nosso animador recém-criado e abrir o seletor de intervalo Também podemos abrir o menu Avançado, que usaremos em um segundo. Ótimo. Então, agora vamos começar a configurar nosso animador Aqui está a propriedade de posição que acabamos de adicionar da lista. A primeira coisa que precisamos fazer é configurar o ponto de mudança para esse animador No nosso caso, quero que o texto entre na parte inferior. Portanto, meu ponto de mudança será em algum lugar por aqui, podemos configurá-lo para 90. Em seguida, para a forma do nosso animador, certifique-se de configurá-la para aumentar, pois queremos que a animação comece da esquerda para a Depois disso, vamos fazer com que o animador mova cada palavra em vez de cada caractere Com isso, concluímos a configuração do animador. E agora, para controlar essa configuração, vamos animar a propriedade offset Isso muda o texto do ponto de mudança do nosso animador para a forma original. Do texto. Isso significa que quando o deslocamento estiver em -100, ele levará o texto ao ponto de mudança definimos para a propriedade de posição do nosso E quando estiver em 100, o texto estará em sua forma original. OK. Então, agora, verifique se você está no início da animação e crie um quadro-chave para o deslocamento em Em seguida, vá para o segundo e defina o deslocamento para 100. Ótimo. E agora, ao usar animadores de texto, não facilitamos dos quadros-chave para controlar sua velocidade Podemos fazer isso diretamente daqui. Uma boa configuração para uma boa atenuação é definir E's como alto em 20 e Es baixo em 80 Vamos ver como isso parece. Parece bom. Para finalizar essa animação, vamos parar no momento em que a animação está totalmente concluída e criar uma nova máscara para essa camada. Dessa forma, não veremos o texto no início da animação. Caso ainda possamos ver algumas partes do texto no início, podemos mudar o ponto de mudança em nosso animador Só precisamos ajustar a propriedade de posição que temos aqui. Isso parece melhor. Ótimo. Então, agora podemos passar para a próxima parte do texto nesta cena. Podemos animar a palavra projeto no mesmo estilo de animação que usamos na primeira parte Para isso, basta copiar o animador e colá-lo na camada de texto relevante Podemos trazer essa camada até aqui para manter a ordem cronológica do texto. Tudo bem. E agora vamos pressionar Ctrl+F para colar o animador . Parece bom. Antes de prosseguir, vamos ficar aqui, onde a animação está totalmente concluída, e também criar uma máscara para essa camada para obter a mesma introdução do texto anterior. Incrível. Então, agora vamos lidar com a última parte do texto na cena. Para torná-lo um pouco mais interessante, vamos dividir esse texto em duas camadas separadas, uma palavra em cada camada, e criar uma animação pop interessante para ambas Então, podemos compensar essas camadas e obter bons resultados Antes de animá-los, vamos centralizar seus pontos de ancoragem. Tudo bem. E agora vamos selecionar os dois e pressionar S para abrir a propriedade de escala. Agora vamos criar o primeiro quadro-chave para ambos. Quando a escala é definida como zero. Em seguida, vamos ao quadro 15 e definamos a escala para 100. E, finalmente, vamos mover os últimos quadros-chave para o quadro 20. Agora, vamos ficar no meio do quadro dez e aumentá-los um pouco. Vamos definir a escala para 120. Ótimo. E agora vamos facilitar os quadros-chave e , em seguida, acessar o editor gráfico e ajustar as alças para que a animação comece rapidamente, diminua a velocidade no meio e ganhe velocidade no final Ótimo. E agora, neste momento, depois de terminar de animar o texto, antes de prosseguir, é uma boa ideia trabalhar com a narração e verificar se o momento é adequado para a narração Vamos até a placa de vídeo e copiemos a camada de narração de lá. De volta à cena. Vamos colar aqui e ver o que temos até agora. Podemos desativar essa camada para ocultar as legendas. Não precisamos vê-los agora. Vamos nos concentrar em ouvir a narração e assistir à animação Gerenciando uma grande equipe em vários Gerenciando uma grande equipe em vários. Tudo bem. Então, depois de ouvir isso algumas vezes, vejo que a palavra múltiplo deve começar neste momento. Então, vamos selecionar todas as camadas relacionadas a essa parte de animação de texto e movê-las para começar a partir daqui. Neste momento, estou ouvindo a voz novamente e tentando ajustá-la ainda mais. Encontrei vários projetos. Eu cruzo vários projetos. Pelo que entendi, nossa animação dessa parte dura muito tempo. Vamos acelerar isso. Para isso, vamos abrir todos os quadros-chave que temos para essa parte de animação de texto e agora garantir que estamos selecionando todos eles. Não perca os quadros-chave abaixo caso esteja trabalhando em uma tela pequena OK. Agora, digamos que a animação comece em 1 segundo e 15 quadros e termine em 2 segundos e 20 quadros. Vamos ficar aqui e manter pressionada a tecla Alt ou Option no Mac e arrastar o último quadro-chave que temos até este momento Antes de ver o que temos, vamos nos certificar de ajustar o comprimento das camadas desde o início. Isso aconteceu porque arrastamos os quadros-chave para a esquerda enquanto encurtamos a duração dessa animação Agora vamos ver isso algumas vezes. Em vários projetos. Cruze vários projetos. Tudo bem. Então, uma vez feito isso, vamos lidar com a primeira parte. Envelhecimento de uma grande equipe. Pelo que ouvi, acho que podemos desacelerar um pouco essa animação. Então, vamos trazer o último quadro-chave do nosso animador de texto para 1 segundo e dez quadros Gerenciando uma grande equipe em várias. Isso é melhor. Podemos começar a segunda parte ainda mais cedo. Ótimo. E agora vamos lidar com a próxima palavra. Equipe em vários projetos. Projeto múltiplo. Acho que podemos começar a partir de 2 segundos e cinco quadros. Projetos. Talvez um pouco mais cedo. Bem, projetos SimplePjects? É isso. Isso é melhor. OK. Então, agora vamos lidar com a última parte do texto e, ao mesmo tempo, garantir que criemos um pequeno atraso nas duas últimas palavras. Jex não é fácil. Não é fácil. Gerenciar uma grande equipe em vários projetos não é fácil. Muitos textos. Tudo bem. Espero que, ao trabalhar na cena, você tenha uma ideia de como criar cenas principais baseadas em texto. Primeiro animamos cada parte depois ajustamos o tempo de acordo com a narração Esse método passo a passo facilitará sua vida , em vez de começar a trabalhar no cronograma desde o início. Tudo bem, tudo parece ótimo. E agora podemos excluir a camada de voice over e começar a trabalhar na transição para a próxima cena. No nosso caso, o que inicia a transição é o ponto de exclamação, que precisa aparecer e desaparecer enquanto revela o objeto cursor principal que temos no projeto Tudo bem. Então, primeiro, vamos criar o ponto de exclamação. Certifique-se de usar a fonte certa para o tamanho, você pode deixá-la em 100. Em seguida, vamos colocá-la na posição correta e marcar essa camada com uma cor diferente. Agora, vamos começar a animá-lo. Em primeiro lugar, sabemos que essa camada deve entrar na cena aproximadamente nesse momento , então vamos movê-la aqui. E agora vamos animá-lo usando as propriedades de escala e rotação Crie um quadro-chave para escala e rotação. Agora, pressione para ver todos os quadros-chave e verifique se a escala está definida como zero neste momento Então, vamos seguir em frente e definir a escala para 100 por enquanto. Agora vamos girar a camada 180 graus para que ela fique de cabeça para baixo Em seguida, no meio da animação, vamos escalar a camada para obter uma boa animação pop-up . Incrível. E, finalmente, como precisamos criar uma transição dessa camada para o cursor, podemos definir a última escala, quadro-chave, como zero, para que ela desapareça Em seguida, começaremos a animação da esfera diretamente daqui. Por enquanto, vamos facilitar os quadros-chave de rotação e garantir que o movimento comece devagar e ganhe velocidade no final Depois disso, para os quadros-chave de escala, podemos fazer com que a animação comece rapidamente, diminua a velocidade no meio e depois acelere novamente no final Eu acho que parece ótimo. Agora, estamos prontos para trabalhar na última parte da cena, que é criar a animação da esfera. Essa esfera será nosso cursor ao longo deste projeto. Então, primeiro, vamos selecionar a ferramenta de forma. Certifique-se de que nenhuma camada esteja selecionada e, em seguida, crie uma esfera proporcional enquanto mantém pressionada a tecla Shift Vamos definir o tamanho para 60. E agora, antes de seguir em frente, quero te dar uma pequena dica. Quando você tem um projeto que inclui algum tipo de animação de cursor ou esfera como objeto principal, sugiro que você o pré-compõe e o mantenha dentro de uma A razão para isso é que, quando estiver dentro da pré-composição, será muito mais fácil ajustar o design desse objeto ou criar uma animação exclusiva para ele, se necessário Também será muito mais fácil caso você queira adicionar outras camadas para se adequar a uma aparência específica. Você entenderá isso melhor no curso, já que é exatamente isso que vamos fazer, usaremos nossa camada de fundo animada para colorir esse objeto. Por enquanto, vamos voltar à cena e começar a animar essa camada Primeiro, vamos começar a partir daqui. Agora, vamos colocá-lo no lugar certo na cena. Precisamos posicioná-lo no mesmo lugar. Já podemos reduzir essa pré-composição para obtê-la em qualidade total Mais tarde, falaremos em profundidade sobre a função de colapso. Mas agora vamos animar essa camada. Podemos começar um pouco depois da animação do ponto de exclamação Quando o ponto de exclamação estiver desaparecendo, podemos usar a escala para criar uma animação pop-out de 1 segundo Agora, vamos abrir a propriedade position e criar uma boa animação pop-up Portanto, o foco do espectador vai para essa parte antes de passar para a próxima cena Podemos fazer essa camada pular antes de cair no final. Ótimo. Agora, vamos garantir que a animação em escala ocorra rapidamente pois queremos que ela apareça logo antes que o ponto de exclamação desapareça E agora vamos nos concentrar em facilitar os quadros-chave de posição. Estou mostrando esse processo em vez de informar as configurações finais de velocidade porque esse é o fluxo de trabalho realista Às vezes, não sabemos qual atenuação se encaixará na animação, então nos ajustamos ao longo do caminho e tentamos entender o que fica melhor Ok, então agora eu acho que precisamos mover a esfera. Quando você já tem quadros-chave de posição em sua camada, não se esqueça de ficar em um dos quadros-chave primeiro Somente então, enquanto todos os quadros-chave de posição estiverem selecionados, mova a esfera para onde você precisa que ela esteja É um material super básico, mas quero ter certeza de que você não cometa erros desnecessários durante o curso. Tudo bem? Acho que a posição é boa, mas acho que a animação em escala precisa começar um pouco mais rápido. Vamos ver como isso parece. Isso é melhor. Mas a parte final ainda parece um pouco lenta demais. Além disso, como você deve se lembrar, acordo com o storyboard e a narração, essa cena deve terminar na quarta segunda, e agora estamos quase no sexto Então, vamos abrir os quadros-chave do ponto de exclamação e acelerar a animação Vamos fazer com que dure 20 quadros. Vamos fazer o mesmo com a animação do cursor e depois ajustar o tempo. O tempo parece bom, mas acho que podemos empurrar a esfera um pouco mais alto antes que ela caia. Nesse ponto, geralmente assisto à animação algumas vezes e faço os ajustes finais, mas não fico preso por muito tempo em uma parte. Nosso objetivo é primeiro garantir que a animação tenha uma boa aparência e se encaixe na narração Queremos passar para as próximas cenas e terminar todas elas. Depois de termos tudo pronto, podemos dedicar um tempo para ajustar os retoques finais Tudo bem, então quando eu estiver satisfeito com a animação e souber que ela corresponde à duração correta, acordo com o storyboard e o roteiro, podemos cortar a duração desnecessária dessa composição No momento, a duração é de 2 minutos, mas a cena realmente termina por volta do quinto segundo. O que eu geralmente gosto de fazer é esperar mais um segundo antes de cortar a composição Então, vamos ficar na segunda sexta posição e encurtar a área de trabalho até esse ponto Ótimo. Agora vamos voltar à composição principal e trazer a primeira cena para a linha do tempo Nesse estágio, precisamos adicionar animação adicional a essa pré-composição para ela corresponda ao que está acontecendo na Eu prefiro fazer isso dessa maneira porque não quero converter as camadas dentro da pré-composição três D e animá-las com Podemos fazer isso, e faremos, em algumas cenas, mas em muitos casos, podemos criar um ótimo movimento no design sem Isso porque três cenas D são renderizadas muito mais lentamente do que duas D, e evitá-las quando possível acelerará nosso fluxo Tudo bem. Com isso em mente, vamos continuar trabalhando. Primeiro, precisamos alinhar essa pré-composição à esquerda para que possamos começar com o início do texto interno Quando precisamos criar um movimento de panorâmica lateral, é claro, usamos a propriedade position para animá-lo. Eu costumo combinar o início da animação da posição com o início da animação das cenas, depois vou até o ponto em que a animação da cena termina e deslizo a composição para o outro lado Nesse caso, precisamos alinhá-lo à direita. Isso nos dá um ponto de partida sólido. Depois disso, podemos facilitar os quadros-chave e visualizá-los Por enquanto, a animação não combina perfeitamente com o que está acontecendo na cena. Para corrigir isso, podemos trabalhar na velocidade da animação da posição e ajustar quando ela acelera Nosso principal objetivo aqui é chegar ao ponto em que a palavra múltiplo apareça. Isso acontece neste momento. Então, vamos ajustar as alças do gráfico para que o movimento acelere no momento certo, garantindo que a palavra apareça exatamente quando necessário . Por enquanto, parece bom. Mas notei que o ponto de exclamação na esfera está começando tarde demais. Vamos voltar à cena e mudar essa parte um pouco mais cedo. Estou assistindo a palavra fácil e tentando encontrar o momento em que ela quase termina sua animação Esse parece ser o momento perfeito para começar a parte final. Vamos agora voltar para a composição principal e ver como isso fica agora. Isso parece melhor agora. Ótimo. Em seguida, podemos tornar essa animação mais interessante adicionando uma animação em escala quando a palavra múltiplo aparecer. Isso acontece em algum lugar entre o primeiro e o segundo segundo. Então, vamos criar o primeiro quadro-chave aqui, depois passar para o final da animação pop-out e adicionar outro quadro-chave nesse momento Agora, no meio dessa animação, vamos ajustar a escala. Primeiro, vamos tentar reduzir a pré-composição para 80. Agora, vamos ajustar a velocidade, para que ela comece rápido, diminua a velocidade e ganhe velocidade novamente no final Vamos ver como isso parece. É bom, mas acho que ficará ainda melhor se aumentarmos em vez de diminuirmos. Por causa dessa escala, também precisaremos deslocar a cena um pouco para a esquerda no mesmo momento Como você deve ter notado, isso cria um novo quadro-chave. Vamos ver como funciona agora. Neste ponto, quero que a posição diminua um pouco. Para fazer isso, vamos selecionar todos os quadros-chave e pressionar F nove para aplicar o Easy Ease padrão Isso nos dará uma breve pausa no movimento neste exato momento Agora, podemos abrir o editor gráfico e ajustar a velocidade no início da animação de posição para adicionar um movimento um pouco mais interessante Mais uma vez, estou mostrando o processo bruto de criar um bom movimento. Não pense que designers profissionais de movimento criam uma animação perfeita na primeira tentativa. Isso não é verdade. Todos nós adicionamos quadros-chave , os ajustamos e experimentamos até encontrar algo que pareça certo Esse é o processo de animação natural e saudável. Tudo bem, tudo parece ótimo. Para finalizar, acho que podemos encerrar a animação da posição um pouco mais cedo, já que já adiantamos a parte final há alguns minutos Vamos trazer o último quadro-chave para o segundo quarto e verificá-lo Ok, isso parece perfeito. Antes de prosseguir com a animação da próxima cena, vamos reduzir essa pré-composição para confirmar que ela não interferirá na animação que acabamos Nada muda aqui porque estamos usando apenas duas camadas D simples sem efeitos ou três câmeras D. Mas, mais tarde no curso, veremos cenas em que o colapso da pré-competição faz a diferença, e vamos nos aprofundar nisso nessas aulas E com isso, terminamos esta lição. Agora estamos prontos para passar para a próxima, onde começaremos a trabalhar na próxima cena. Vai ser super divertido, então nos vemos lá. 12. Criação da cena 2 - Animação de esfera quicando: Volte. Nesta lição, criaremos a segunda cena. Então, vamos até a placa de vídeo e ver o que exatamente precisa acontecer e quanto tempo essa cena deve durar. Lembre-se de que não queremos criar uma cena muito curta ou muito longa. Isso causará um problema a longo prazo, pois precisaremos ajustar os quadros-chave e o tempo, caso não tenhamos acertado Tudo bem? Então, nesta cena, precisamos apresentar muitas mensagens e tarefas. E para tornar essa cena interessante, precisamos criar uma animação interessante de esfera saltitante Agora, eu quero que você entenda para saber qual deve ser a duração da cena. Para calculá-lo, precisamos ver em que segundo a cena começa. No nosso caso, está em torno segundos quatro e 15 quadros. Agora precisamos ver onde a cena termina em nossa placa de vídeo. É por volta do segundo sétimo. Isso significa que a duração da cena que precisamos animar deve durar aproximadamente 3 segundos. Tudo o que fiz foi calcular quantos segundos existem do segundo quarto ao segundo sete , são 3 segundos. Portanto, essa cena deve durar 3 segundos. Como temos uma placa de vídeo muito precisa que se encaixa perfeitamente na narração, nem precisamos ouvir a narração e contar qual deve ser a duração da cena Com isso em mente, vamos começar a criar a cena. Primeiro, precisamos criar uma nova composição. Vamos chamar isso de cena dois. Certifique-se de ajustar as dimensões e, depois disso, verifique se são 30 quadros por segundo e se a duração é de 2 minutos. Quando terminarmos a animação, ajustaremos a duração, é claro. Ótimo. Então, agora primeiro precisamos projetar a cena e criar esses balões de mensagens e caixas de tarefas Obviamente, poderíamos preparar tudo no Illustrator e importá-lo com o restante dos designs Mas em meus cursos, eu sempre tento ensinar você a criar cenas diretamente no After Effects. Para mim, é muito mais fácil criar cenas e efeitos posteriores, e isso me poupa muito tempo. Além disso, dessa forma, tenho muito mais flexibilidade e posso fazer qualquer personalização e ajustes em tempo real sem mexer com arquivos externos Dito isso, vamos começar a criar o primeiro balão de mensagens e vou mostrar como fazer isso rapidamente Primeiro, precisamos ter algum texto como mensagem. Caso você não saiba o que escrever ou o cliente não tenha lhe contado, você pode acessar o GPT e pedir que ele escreva algumas mensagens. Isso é exatamente o que eu fiz. Expliquei no que estou trabalhando e pedi que ele gerasse as mensagens para mim. Salvei esse texto como um arquivo PDF que você pode encontrar na minha pasta de ativos. É chamado de mensagens aleatórias. Tudo bem, então vamos abrir o PDF e copiar esta mensagem. De volta ao After Effects, vamos colá-lo. Agora, vamos ajustar o tecido e o tamanho. Certifique-se de que o parágrafo esteja centralizado e, finalmente, alinhe essa camada ao centro da composição. Ótimo. E agora vamos criar o balão de mensagem para fazer isso de forma que o tamanho do balão de mensagem se ajuste automaticamente ao nosso Vamos pesquisar o efeito de duas caixas de texto em D. Agora, para usá-lo, precisamos clicar duas vezes nele. Mas se a camada for selecionada, ela não funcionará. Portanto, certifique-se de que nenhuma camada esteja selecionada e só então clique duas vezes no efeito. Ok. E agora precisamos ter certeza de que a caixa está usando nossa camada de texto como fonte. Vamos mover a caixa abaixo da camada de texto. E agora podemos mudar o design da caixa. Para fazer isso rapidamente, você pode segurar Alt ou Option e clicar no traçado algumas vezes até chegar à opção sem traçado. Agora vamos deixar o preenchimento branco. Vamos mudar a cor do texto para preto. E agora, como você pode ver, podemos adicionar mais texto e a caixa de texto será ajustada de acordo. Tudo bem E agora vamos criar a caixa de texto, para que pareça um balão de mensagem Podemos definir o preenchimento para 70. Em seguida, podemos arredondar os cantos. Vamos configurá-lo para 120. Ótimo. Então, agora que sabemos que precisaremos de mais dessas bolhas na cena, será uma boa ideia pré-compor Vamos chamar duas mensagens de uma. O número dois representa o número da cena em que essa mensagem aparece. Ótimo. Então, agora, antes de continuar e duplicar essa composição, vamos inseri-la e ajustar as dimensões Não precisamos que essa competição seja tão grande. Verifique se a visualização está marcada e ajuste a largura e a altura. Ótimo. Isso é perfeito. Agora, vamos até o painel do projeto e duplicar essa pré-composição, para que possamos fazer alterações dentro da duplicata sem afetar a primeira Vamos abrir o PDF e copiar outra mensagem. Eu vou com este. seu texto tenha se movido muito para a direita, isso significa que o parágrafo do texto não estava alinhado ao centro Tudo bem Então, agora vamos voltar à cena e trazer a nova pré-competição aqui. Incrível. Podemos deixar como está por enquanto. Agora vamos começar a projetar a caixa de tarefas que podemos ver na placa de vídeo. No meu caso, também adicionarei uma mensagem junto com o ícone da caixa de seleção E para fazer isso rapidamente, podemos duplicar a última caixa de mensagem que criamos e ajustar o design interno Vamos mudar o nome para a primeira tarefa. Ótimo. Agora vamos entrar na pré-composição e ajustar o texto e o design Para as tarefas, eu também uso o GPT para gerar algumas tarefas aleatórias que podem ser relevantes para o meu projeto Então, agora, vá para minha pasta Assets e abra um arquivo PDF chamado Random Tasks. Vamos copiar esse. De volta ao After Effects, vamos substituir o texto atual pelo texto da tarefa. Ótimo. E agora vamos ajustar o design da caixa de texto Podemos reduzir o arredondamento para, digamos, 35. E também podemos adicionar um traço cinza a esse design, para que seja diferente do balão de mensagem E agora precisamos abrir o menu de preenchimento e garantir que temos algum espaço no lado esquerdo para adicionar o ícone da caixa de seleção Precisamos aumentar o espaço aqui. Vamos escalar um pouco a largura dessa composição. Ótimo. Então, agora vamos definir o preenchimento à esquerda para 70 Parece ótimo. Em seguida, vamos usar um dos ícones de caixa de seleção que temos em nossos designs de tela Acho que estava na tela de tarefas. Então, vamos inseri-lo e copiar a caixa de seleção verde e o traçado cinza da caixa de seleção, porque podemos adicionar uma animação da caixa de seleção quando o cursor pousar nessa mensagem quando criamos a animação de salto Vamos começar com a camada de traçado cinza, copiá-la e, em seguida, acessar nossa pré-composição de tarefas e colá-la aqui Alinhe-a verticalmente no centro da composição e posicione-a no lado esquerdo da caixa Vamos ajustar a escala para se adequar ao design. 350 parece bom. Vamos reduzir essa camada para obtê-la em alta qualidade. Vou movê-lo um pouco para a esquerda. Ok. Parece bom. Agora, vamos trazer o ícone da caixa de seleção verde. Tudo bem Isso parece perfeito. Agora vamos criar outra pré-composição de tarefas. Para isso, vamos duplicar essa pré-composição no painel do projeto Agora, insira a nova pré-composição e altere a tarefa . Vamos copiar esse. Ótimo. Em seguida, vamos ajustar a posição dos ícones. Então, agora, para fazer com que pareça diferente dos designs das mensagens, vamos fazer o texto aqui em negrito. Vamos fazer o mesmo com a primeira tarefa. Podemos ajustar um pouco a posição dos ícones. Ok, a seguir, acho que será melhor colorirmos o traço em preto. Sim, isso parece melhor. Vamos fazer o mesmo na primeira tarefa também. Tudo bem. Feito isso, podemos fechar todas essas pré-composições e voltar para a composição da cena Vamos trazer as duas pré-composições de tarefas aqui e encontrar uma boa escala e um local para todos os elementos que temos Primeiro, podemos reduzir um pouco as pré-composições. Vamos definir a escala para 60 por enquanto. Já podemos derrubar essas pré-composições. E agora vamos encontrar uma boa posição para as mensagens e as tarefas que temos aqui. Neste momento, estou apenas tentando criar uma composição visualmente equilibrada. Então, estou usando a grade de ação segura para garantir que tudo esteja perfeitamente equilibrado. Acho que podemos reduzir ainda mais as pré-composições . Vamos tentar 50. Estou tentando colocar os elementos, então terei espaço suficiente para adicionar a animação da esfera saltitante que precisa, no final, entrar entre os Tudo bem Acho que estou bem com a composição. Vou pressionar a tecla de apóstrofo para desligar a grade. E agora vamos trazer a pré-composição do objeto cursor para a cena e começar a animá-la Tudo bem. Então, primeiro, já podemos reduzir essa pré-composição E se achar que seu computador está com problemas, você pode diminuir a qualidade da pré-visualização. Isso acontece por causa do colapso das mensagens e das pré-composições das tarefas É difícil para o After apresentar precomposições baseadas em expressões complexas, como as caixas de texto que temos dentro como as caixas de texto que temos dentro desses quatro precoms. Caso você não tenha percebido, o efeito de duas caixas D que estamos usando para ajustar automaticamente o texto é configurado com expressões complexas no Essa é uma das razões pelas quais digo que, às vezes, adicionar muitas expressões ao projeto pode realmente retardar seu fluxo de trabalho. Tudo bem, de volta ao projeto. Vamos começar a animação do cursor de algum lugar por aqui. Agora pressione P e crie o quadro-chave da primeira posição no início da linha do tempo Agora, eu não sei quanto tempo toda essa animação precisa durar. Então, como sempre, vamos definir quadros-chave cada 1 segundo. Posteriormente, vamos ajustá-lo. Tudo bem? Agora, traga o cursor até aqui, para que ele toque na pré-composição da tarefa Para ver o que estamos fazendo de melhor, podemos colorir a cor de fundo padrão da pré-composição com um pouco de cinza Ok, agora vamos mover 1 segundo e trazer o cursor aqui. Em seguida, avance 1 segundo e posicione-o para tocar na primeira pré-composição de mensagem Agora, vamos manter esse processo até tirarmos o cursor da cena. Ótimo. A próxima coisa que adoro fazer ao criar animações animadas é curvar o caminho da posição pontos em que o objeto precisa pairar Então, usando a ferramenta de conversão de vértice, clique uma vez em cada ponto que temos nesse caminho Ótimo. Agora vamos voltar à ferramenta de seleção e ajustar as alças dos pontos para obter uma curva muito melhor. Também podemos ativar uma curva aqui e ajustar a alça para obter um caminho reto. Ótimo, vamos ver o que temos. Parece estranho por enquanto, mas tudo bem. Vamos ver o que precisamos fazer para que ele se mova melhor. Primeiro, vamos facilitar todos os quadros-chave e ver como ficam Como você pode ver, agora temos algumas pausas entre os quadros-chave Isso é melhor, mas ainda temos algum trabalho a fazer para realmente fazer esse movimento saltitante Para isso, precisamos ir até o gráfico de velocidade e, primeiro, garantir que os pontos em que o cursor toca as pré-composições aconteçam muito rápido. Isso significa que precisamos mover essa alça para a direita. Vamos ver como isso parece. Parece melhor, mas agora também queremos que o cursor se recupere super rápido Isso significa que também precisamos iniciar a animação de entrada do segundo quadro-chave super rápido E agora, como você pode ver, temos aquele movimento saltitante. Mas, como você pode notar, ainda temos algumas pausas estranhas quando o cursor paira no Não se preocupe com isso. Nós vamos lidar com isso em um segundo. Por enquanto, vamos continuar fazendo todos os pontos de contato saltem ajustando as alças Ok, isso parece bom. Agora, vamos lidar com os momentos de pausa. Primeiro, você precisa entender que isso está acontecendo porque, neste momento, a velocidade é zero, como você pode ver na pequena caixa amarela. Nesse ponto, a velocidade do movimento é 81. Aqui está 223 Aqui são mais de 1.000. Você entendeu a ideia. Então, agora o que precisamos fazer é garantir que o movimento neste ponto não seja zero. Para fazer isso, podemos aumentar o movimento de saída e precisaremos combinar o movimento de entrada exatamente a mesma velocidade Mas há uma maneira de controlar os dois ao mesmo tempo. Para isso, primeiro precisamos selecionar os dois e depois pressionar Control Shift K ou Command Shift K no Mac. Dessa forma, abriremos o painel de velocidade do quadro-chave. Também podemos abrir esse painel fora do editor gráfico. Para fazer isso, selecione o quadro-chave, segure Alt ou Option no Mac e clique duas vezes nele Ou você pode clicar com o botão direito do mouse e selecionar Velocidade do quadro-chave. Tudo bem. Então, agora vamos voltar ao editor gráfico. E quando o quadro-chave relevante for selecionado, pressione a tecla control shift K ou a tecla Command Shift K no Mac E agora, tudo o que precisamos fazer é marcar a opção contínua. Isso conectará o movimento de entrada e saída desse quadro-chave, o que agora nos possibilitará controlar o movimento de entrada e saída ao mesmo Eu sugiro ajustar a velocidade, não arrastando a alça, mas movendo-a diretamente clicando no ponto assim Agora você pode verificar sua animação e ajustar a velocidade de acordo. Isso parece melhor. Agora, vamos fazer o mesmo na segunda parte em que o cursor está pairando no ar no Tudo bem Eu acho que parece ótimo. Então, agora vamos sair do editor gráfico e acelerar toda a animação. Vamos fazer com que dure 3 segundos e 15 quadros. Para fazer isso, selecione todos os quadros-chave, segure Alt ou option e arraste o último até a posição do indicador de tempo . Vamos ver como isso parece. Agora vamos seguir em frente e tornar a cena um pouco mais interessante adicionando uma microanimação às pré-composições da mensagem e da tarefa quando o cursor salta Vamos ignorar o tempo por enquanto e primeiro criar a microanimação. Para isso, usaremos as propriedades de posição e rotação. Primeiro, vamos começar com a posição. Vamos fazer com que essa animação dure dez quadros. No meio, abaixe um pouco a pré-composição. Vamos ver como isso parece. Ok, agora vamos adicionar uma leve animação de rotação. Vamos facilitar os quadros-chave e verificar o movimento. Parece legal. Agora, vamos encontrar o momento perfeito para que esse micromovimento comece. Deve estar certo quando o cursor pousar neste pré-comunicador. Isso parece ótimo. Agora vamos fazer o mesmo com a tarefa precom. Desta vez, vamos girá-lo na direção oposta. Agora, vamos cronometrar essa animação com o cursor. Ótimo. E agora, antes de prosseguir, vamos marcar o cursor em amarelo. E vamos fazer o mesmo na primeira cena também. Tudo bem. Então, com isso, finalizamos a animação principal que precisa acontecer nessa cena. Por enquanto, não vou continuar mexendo com essa composição em termos de design ou trazendo elementos adicionais para a cena Como expliquei anteriormente, trataremos dos retoques finais posteriormente Por enquanto, há coisas mais importantes a serem feitas, por exemplo, verificar se ele se encaixa no tempo de voice over. Então, para verificar isso, vamos primeiro encurtar a duração dessa cena Podemos terminar na quarta segunda. Agora vamos voltar à composição principal e trabalhar na transição da primeira cena para a segunda cena que acabamos de animar Meu objetivo aqui é conseguir uma boa transição de match cut. Para isso, primeiro precisamos encontrar o ponto no tempo em que o cursor na primeira cena está prestes a sair da tela e, em seguida, iniciar imediatamente a segunda cena. Aqui está o momento em que podemos terminar a primeira cena. Agora, vamos começar a segunda cena a partir daqui e finalmente, recortar a primeira cena para que ela termine exatamente nesse momento. Agora, vamos verificar essa parte algumas vezes para ver se parece correta. Precisamos garantir que as duas composições não se sobreponham uma à outra Acho que parece ótimo, mas tenho um problema com o cursor na segunda cena pairando muito lentamente no ar após o primeiro salto Então, vamos entrar na cena e ajustar a velocidade do movimento neste momento. Ótimo. Isso parece muito melhor agora. E com isso, terminamos a lição e estamos prontos para passar para a próxima, onde começaremos a criar a próxima cena e muito mais. Vai ser divertido . Então nos vemos lá. 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. 13. Criando a cena 3 - Animação da barra de pesquisa: Volte. Vamos começar esta lição trabalhando na próxima cena. A primeira coisa que precisamos fazer antes de fazer isso é ir até a placa de vídeo e verificar o que precisamos criar na cena e como ela deve ser projetada e animada. Além disso, é claro que precisamos verificar qual deve ser a duração da cena. Como você pode ver, ele deve começar por volta do sétimo segundo e terminar por volta do 11º segundo Isso significa que a duração da cena deve ser inferior a 4 segundos no total. Com isso em mente, vamos criar uma nova composição para essa cena. Podemos chamar essa cena de três e garantir que todas as configurações estejam corretas. Para o plano de fundo, podemos alterá-lo de volta para preto. Tudo bem. E agora, o primeiro e principal objeto que precisa estar na cena é a barra de pesquisa. Se você se lembra, quando preparamos o painel de interface do painel, deixamos esse objeto como uma camada separada. Agora, podemos abrir a pré-composição do painel e copiar as camadas relevantes daqui Para tornar isso um pouco mais rápido, basta selecionar toda a área aqui com os objetos da barra de pesquisa, segurar a tecla Shift e clicar nas camadas irrelevantes para desmarcá-las Vamos nos certificar de que selecionamos as camadas relevantes. Agora vamos copiar as camadas selecionadas. Em seguida, vá para nossa nova composição e cole-as aqui. Ótimo. Então, agora vamos ver o que temos aqui. Como você pode ver, depois de colar as camadas, elas não são organizadas na ordem correta no painel de camadas Caso você não saiba, no After Effects, a seleção desempenha um papel importante nessa parte. A primeira camada que você selecionar aparecerá na parte superior do painel Camadas. Foi assim que selecionamos as camadas da pré-composição do painel, e é por isso que vemos esse resultado aqui agora Para corrigir isso rapidamente, podemos selecionar a camada inferior porque essa é a camada que queremos que esteja acima. Em seguida, mantenha pressionada a tecla Shift e selecione a camada superior. Agora pressione Control ou Command X para recortá-los e , em seguida, pressione Control V para colá-los novamente aqui. É um truque rápido para reorganizar suas camadas rapidamente sem fazer isso manualmente, uma por uma. Tudo bem. E agora vamos começar a ajustar a cena. Primeiro, podemos nos livrar desse ícone porque não precisamos dele aqui. Em seguida, vamos garantir que nossos objetos estejam perfeitamente alinhados no centro da composição Para isso, podemos abrir a grade de ação segura e depois selecionar todas as camadas e alinhá-las perfeitamente no centro. Parece ótimo. Em seguida, também podemos excluir a camada de pesquisa porque criaremos um botão na área direita com um texto de pesquisa dentro de alguns minutos. Vamos continuar verificando se perdemos alguma coisa aqui porque vejo que temos três camadas no painel de camadas, mas vejo apenas dois objetos na cena. Nesse ponto, podemos ativar e desativar as camadas para entender o que está acontecendo. Como você pode ver, eu tenho uma camada de traçado que faz parte da caixa de pesquisa. No nosso caso, eu realmente não preciso disso, então podemos excluí-lo agora. Tudo bem. E agora, antes de começarmos a animar a cena, vamos escalar rapidamente os objetos que temos aqui Para isso, será uma boa ideia colocar o ícone de pesquisa na caixa principal e, em seguida, alinhá-lo ao centro da composição para garantir que esteja perfeitamente Agora podemos escalar a camada da caixa e o ícone será dimensionado junto com ela. Parece bom. Então, agora já podemos reduzir as camadas para tê-las na melhor qualidade e continuar projetando essa cena. Como sabemos que adicionaremos aqui uma frase que diz: preciso de ajuda. Vamos selecionar a ferramenta de texto e anotá-la aqui, pois em breve a animaremos Vou mudar a cor do texto para branco, eu possa ver o que estou fazendo e vamos definir o peso como normal. Tudo bem. Isso parece bom. Agora, vamos trazer o texto de volta para preto e colocá-lo dentro da caixa de pesquisa. Podemos reduzir um pouco o tamanho da fonte. 35 parece bom. Ótimo. Então, agora estamos prontos para começar a animar a cena A primeira coisa que podemos animar é a animação de datilografia do E para fazer isso, usaremos um efeito embutido que podemos encontrar no painel de efeitos e predefinições Você pode digitar máquina de escrever na caixa de pesquisa e, em seguida, usar o efeito de console de máquina de escrever com cursor piscante Para usá-lo, verifique se a camada de texto está selecionada e clique duas vezes no efeito para aplicá-lo à camada de texto selecionada. OK. Então, agora, como você pode ver, o texto começa a ser animado a partir do centro, o que não é o que queríamos Precisamos do texto para iniciar a animação da máquina de escrever da esquerda, e isso acontece porque o parágrafo do texto estava alinhado ao centro Nesse caso, vamos ajustar o parágrafo à esquerda e ajustar a posição da camada. E agora a animação ficará como deveria. Agora vamos pressionar a camada. E, como você pode ver aqui, vemos os dois quadros-chave que criam o tipo de animação O quadro-chave está começando desse momento porque, quando aplicamos esse efeito, estávamos nesse momento Portanto, caso você não estivesse no início da animação antes de aplicar o efeito, mova os quadros-chave para começar do início da linha do tempo Tudo bem. Então, agora vamos fazer essa animação durar 1 segundo. Como você pode ver, temos essa bela animação de datilografia e um pequeno cursor piscando ao lado dela que continua piscando sem parar Você pode brincar com as diferentes propriedades desse efeito, se quiser. Mas no meu caso, vou deixar como está e seguir em frente. Tudo bem. Então, agora eu não quero que o texto simplesmente comece a aparecer na animação. Quero criar uma aparência um pouco mais realista para a caixa de pesquisa. E para isso, quero ter o texto de pesquisa que excluímos anteriormente. Deixe-me mostrar o que quero dizer. Vamos voltar ao painel, pré-compor, copiar a camada de pesquisa de lá e depois colá-la em nossa cena Coloque essa camada na posição correta e ajuste a escala dela para 150 porque esse é o valor de escala que definimos para as outras camadas nesta cena. Agora, vamos colocar essa camada abaixo da camada de texto e colocá-la na caixa de pesquisa branca. Vamos ampliar um pouco para que possamos ver o que estamos fazendo e colocar o texto um pouco à esquerda. Agora vamos começar a camada de texto 1 segundo após o início da linha do tempo Ótimo. E agora vamos cortar a camada de pesquisa para terminar na segunda. Vamos nos certificar de recortar essa moldura também. E agora, se visualizarmos o que temos, parecerá mais uma caixa de pesquisa realista que todos sabemos que existe na Internet. Nesse ponto, você pode, é claro, alterar o texto ou ajustá-lo, se quiser. Isso não afetará a animação de datilografia. Tudo bem. E agora vamos seguir em frente e criar o botão de pesquisa que precisa estar no lado direito da caixa de pesquisa. E existe uma maneira muito fácil e rápida de fazer. Deixe-me fechar todas as camadas na pasta no painel do projeto antes de prosseguirmos. Ok, agora, para criar o botão, podemos duplicar a mensagem que criamos anteriormente Agora vamos mudar o nome para três botões um. O número três representa a cena em que esse botão deve aparecer. Agora, vamos inserir essa pré-composição e primeiro alterar o texto a ser Depois disso, vamos colocar o texto negrito e ajustar a largura da composição. 450 parece bom. Agora vamos encontrar a cor correta com a qual a caixa do botão deve ser preenchida. Para isso, vamos até a pré-composição do painel e abriremos a guia de personagens Agora vamos usar o conta-gotas para obter uma amostra da cor roxa do botão na área do cabeçalho Em seguida, vamos abrir a caixa de cores e copiar a etiqueta dessa cor. E agora vamos voltar ao nosso botão de pré-composição, selecionar a camada do botão, abrir o preenchimento dessa camada e colar a tag que copiamos Finalmente, vamos mudar a cor do texto para branco. Vamos salvar o projeto antes de prosseguir. Tudo bem. E agora eu quero que criemos uma animação de clique para esse botão. Obviamente, podemos criar uma animação em escala simples para isso fora da cena principal, mas quero ensinar como, com uma técnica muito simples, você pode criar uma animação de clique muito mais interessante que é usada em muitos vídeos explicativos do SAS A primeira coisa que quero observar antes de iniciarmos a animação de cliques é que você entenda que, como estamos usando o efeito de duas caixas de texto em D, não podemos dimensionar a camada do botão porque ela está conectada por meio de expressões à camada de texto que temos nesta composição Portanto, criaremos a animação de escala para a camada de texto e a caixa de botões atrás dela será animada de acordo Se você perguntar por que não estamos criando uma forma regular para o botão em vez de usar o efeito de duas caixas de texto em D, é porque sabemos que, posteriormente no projeto, teremos outro botão com texto diferente. Por exemplo, teremos um botão com o anúncio de texto e será muito mais fácil usar o efeito de duas caixas D porque a caixa se ajustará automaticamente ao texto. Tudo bem. Com isso em mente, vamos começar a criar a animação de cliques. Então, primeiro, vamos começar criando uma animação em escala para o texto. Crie o primeiro quadro-chave com o valor atual no início da linha do tempo Agora vamos avançar 15 quadros ou talvez 20 quadros e criar outro quadro-chave com o valor atual Então, no meio dessa animação, vamos reduzir a camada. Podemos configurá-lo para 70. Agora, vamos facilitar todos os quadros-chave e usando o editor gráfico, mover as alças para a esquerda Então, teremos um movimento rápido. Acho que é muito lento. Vamos sair do editor gráfico e fazer com que ele dure 15 quadros em vez de 20 quadros. Então, selecione todos os quadros-chave e, enquanto mantém pressionada a opção Alter, arraste o último quadro-chave até o quadro 15 E agora, vamos tornar essa animação de cliques muito mais interessante. Para isso, primeiro, vamos selecionar a ferramenta Ellipse. Agora vamos desligar o traço. Mantenha pressionada a tecla Alt ou opção e clique na cor do traçado para alternar entre as diferentes opções de traçado até chegar à opção do traçado desativado Para a cor de preenchimento, vamos escolher branco desta vez. Agora, crie uma esfera simétrica. Vamos definir o tamanho para 350. E, finalmente, alinhe-a ao centro da composição e altere o nome dessa camada para Em breve, você entenderá que essa camada será usada. E agora vamos começar a animar essa camada. Primeiro, usaremos a propriedade de escala. No início da animação, defina a escala para zero e crie o primeiro quadro-chave Em seguida, mova 15 quadros para frente e defina a escala para um número maior, algo como 110. Agora, volte ao início da linha do tempo e pressione T para abrir a propriedade de opacidade Crie o primeiro quadro-chave com o valor de 100%. Em seguida, vá para o quadro 15 e defina o valor como zero. Como você pode ver, já estamos recebendo uma aparência interessante. Tudo bem. Vamos seguir em frente. Agora, vamos facilitar os quadros-chave e adicionar o movimento rápido a eles, como fizemos com a animação em escala do texto, e ver como isso ficará Acho que a opacidade desaparece muito rápido. Podemos desacelerar um pouco essa animação selecionando os quadros-chave da opacidade e pressionando F nove para redefinir a atenuação dessa Acho que podemos desacelerar ainda mais arrastando os dois últimos quadros-chave para o quadro 20 Tudo bem. E agora vamos abrir a função Track Mat e criar essa camada, usando o canal Alpha da camada de botões. Isso significa que a esfera será visível somente dentro do formato do botão. Vamos ativar novamente a camada de forma porque precisamos ver o botão. Tudo bem. E agora, como você pode ver, junto com a animação em escala do texto, temos uma animação de cliques muito interessante Acho que a varredura é muito clara no começo. Para corrigir isso, vamos abrir os quadros-chave na camada e alterar o valor do primeiro quadro-chave de opacidade para, digamos, 80% em vez de 80% Isso parece muito melhor. Tudo bem. E agora podemos salvar o projeto e continuar adicionando esse botão à nossa cena. Vamos reduzir essa pré-composição. Podemos definir a escala para 40, reduzir a pré-composição e colocá-la aqui no lado direito . Tudo bem. Então, uma vez feito isso, agora precisamos cronometrar a animação do clique com a animação que acontece na cena. Isso significa que o clique deve começar após o término da animação de digitação Mas, como você deve entender, não podemos simplesmente mover essa pré-composição para começar daqui, porque dessa forma não a veremos no início da animação Em vez disso, vamos ficar no segundo correto, depois inserir o botão de pré-composição, pressionar você para revelar todos os quadros-chave e movê-los para começar a partir desse momento De volta à cena principal, agora temos a animação de cliques começando na hora certa. Podemos ajustar isso mais tarde, caso mudemos alguma coisa na cena. Mas, por enquanto, vamos deixar como está. Também podemos reduzir o tamanho da fonte para 30. Acho que parece um pouco melhor. Tudo bem. Então, agora vamos salvar o projeto e voltar para a placa de vídeo para ver se precisamos adicionar algo mais nessa cena. Como você pode ver, precisamos criar a animação do cursor que cai em algum tipo de oceano. Por enquanto, o Dark Ocean é apenas um recurso de design que não é essencial para o fluxo da cena. O mais importante é criar a animação do cursor porque ela precisa ser sincronizada com a animação principal que acontece nessa cena, que é toda a animação da caixa de pesquisa que criamos anteriormente Essa é a maneira de pensar que eu quero que você tenha enquanto trabalha em projetos complexos. Como já mencionei algumas vezes neste curso, quero que você sempre termine de quero que você sempre termine animar os elementos importantes primeiro, em vez de lidar com ativos de design que não desempenham um grande papel no tempo da animação principal Tudo bem. Então, com isso dito, vamos voltar à nossa cena e adicionar o objeto cursor pré-composição a ela Já podemos reduzir essa pré-composição e vamos começar a criar a animação que ela precisa fazer Precisamos criar algum tipo de animação do cursor caindo, indo abaixo da barra de pesquisa e finalizando clicando no botão. Podemos fazer isso do lado direito ou do lado esquerdo. Eu prefiro fazer isso do lado esquerdo. Então, vamos começar a animação do cursor de algum lugar por aqui. No início da animação, crie o quadro-chave da primeira posição Agora vamos mover 1 segundo, diminuir o zoom um pouco e trazer o cursor para baixo aqui no lado esquerdo. Novamente, vamos avançar mais um segundo e trazer a esfera para algum lugar aqui abaixo da caixa de pesquisa. Podemos trazer esse ponto aqui mais tarde. Vamos curvar esse caminho. Por enquanto, podemos colocar o cursor neste momento em algum lugar por aqui. Em seguida, vamos avançar mais um segundo e colocar o cursor em algum lugar ao redor do botão, ou podemos colocá-lo no botão. Neste momento, eu realmente não sei exatamente como minha animação vai ficar minha animação vai ficar, e está tudo bem. Mas o que eu sei é que vou curvar o caminho da posição agora. Portanto, estou tentando criar o caminho de forma que, após a curva, eu consiga um bom movimento para o cursor Se você não tem experiência suficiente em After Effects, isso provavelmente parecerá muito estranho para você Mas à medida que você ganha experiência trabalhando com caminhos, sejam caminhos de posição ou caminhos criados usando a ferramenta Caneta, você entenderá como estruturá-los de forma que, com a ajuda das alças, obtenha o caminho adequado à sua cena. Então, vamos começar a curvar o caminho. Para isso, podemos usar a ferramenta de conversão de vértice ou podemos usar o atalho Mantenha pressionado o controle e a tecla alt e clique no ponto uma vez. Agora, obtemos as alças da curva que podemos ajustar de forma que o cursor se mova para baixo Repita esse processo para o resto dos pontos desse caminho de posição até obtermos um bom caminho curvilíneo Ok, agora quando temos a animação do cursor, vejo que o cursor levará 3 segundos para alcançar o botão. Isso significa que toda a animação que acontece antes está acontecendo muito rápido, então vamos ajustá-la. Primeiro, podemos fazer com que a animação de digitação dure um pouco mais, do segundo ao segundo terceiro Em seguida, vamos inserir o botão de pré-composição e mover todos os quadros-chave para começar neste momento Tudo bem. Acho que está bom por enquanto. Então, vamos continuar trabalhando. Primeiro, podemos marcar o cursor na pré-composição em amarelo, como fizemos nas três composições anteriores Dessa forma, podemos facilmente distingui-lo do resto das camadas. E agora, a partir desse momento, vamos criar uma animação de clique para o cursor. Nessa situação, podemos simplesmente criar uma animação em escala, fazendo com que o cursor seja dimensionado para zero. Vamos fazer essa animação durar dez quadros e ver como fica. Ok, acho que está bom por enquanto, mas acho que podemos facilitar a animação de digitação para que ela não comece de forma linear Vamos facilitar esses quadros-chave. E agora a animação terá um início e um fim fáceis e agradáveis . Agradável. Isso parece melhor. Podemos colocar o botão prec abaixo da camada de texto para ter uma linha do tempo mais organizada E agora vamos pressionar P no objeto cursor e começar a ajustar a animação de posição que criamos Enquanto estamos fazendo isso, você precisa entender que, ao ajustar a animação de posição, talvez precisemos ajustar o resto da animação na cena Vamos selecionar todos os quadros-chave e, primeiro, facilitar todos eles. Agora, vamos fazer essa esfera entrar em cena rapidamente. Dessa forma, obteremos um bom movimento contínuo da cena anterior em uma boa transição de match cut. Neste ponto, estou bem com o cursor parando porque isso trará o foco para o texto. E agora, neste momento, estou apenas verificando a animação e tentando pensar se o momento é bom, na minha opinião, o texto deve terminar a animação de texto um pouco mais rápido. Nesse momento, estou sempre assistindo à animação algumas vezes até conseguir algo que pareça certo. Então, neste ponto, podemos mover alguns quadros-chave e tornar o tempo um pouco melhor. É importante lembrar ao ajustar alguns quadros-chave, você sempre precisa se certificar ajustar o restante dos quadros-chave relacionados a essa animação de acordo com o novo tempo No nosso caso, preciso mover a animação em escala para começar daqui e, em seguida, inserir a animação do botão e garantir que a animação do clique também se ajuste ao tempo externo. Ok, acho que parece um pouco melhor agora. E antes de prosseguir, eu ajustaria a alça desse quadro-chave para que o cursor começasse a se mover lentamente e ganhasse velocidade no final Ótimo. Então, quando terminarmos a animação principal que precisa acontecer nessa cena, podemos começar a trabalhar na transição para a próxima. Nesse caso, quero criar uma animação de escala para a caixa de pesquisa Então, após o clique, ele cobrirá todo o quadro. Assim, podemos converter a camada branca da caixa de pesquisa em uma camada de forma. Clique com o botão direito, vá para criar e selecione Criar formas a partir da camada vetorial. Isso nos permitirá alterar a forma desse objeto de design como se o tivéssemos criado usando a ferramenta Forma ou Caneta. E como a camada original foi criada dentro do Illustrator, talvez tenhamos algumas propriedades desnecessárias dentro da camada de forma recém-criada Então, neste momento, sinta-se à vontade para investigar como essa camada é construída e excluir as propriedades desnecessárias , como grupos ou caminhos de mesclagem Feito isso, vamos começar a trabalhar na animação externa da cena para que possamos fazer uma boa transição para a próxima Primeiro, precisamos encontrar o momento em que queremos iniciar a animação Otro No nosso caso, podemos iniciá-lo a partir do quarto segundo, alguns quadros após a animação de cliques acontecer. E como agora estamos animando a camada da forma, vamos abrir as propriedades da camada e criar o primeiro quadro-chave para o caminho dessa Em seguida, vamos avançar 1 segundo e clicar duas vezes na forma para selecionar todos os pontos. Dimensione essa forma enquanto segura a tecla Shift e controle ou comande no Mac para dimensioná-la proporcionalmente Vamos escalá-lo até que toda a moldura esteja coberta com a forma branca. Tudo bem. Então, por enquanto, a animação não parece muito empolgante, então vamos melhorá-la. Primeiro, vamos facilitar os quadros-chave. Agora, vamos fazer com que essa animação comece lentamente ajustando a alça no editor gráfico à direita Acho que parece muito melhor agora. Com isso feito? Vamos salvar o projeto antes de prosseguir. OK. Então, agora vamos voltar à nossa composição principal e inserir a nova cena na linha do tempo Como você pode notar, não terminamos completamente a animação atral da terceira cena. E isso porque, como eu já disse, é muito importante primeiro verificar se a narração e a animação que narração e a animação criamos estão Antes de criar muitas cenas e animar muitas camadas, vamos trazer a narração para a linha do tempo principal do Comp e assistir a animação inteira para verificar se ela se encaixa na É melhor detectar erros e corrigi-los agora, antes que tenhamos muitas cenas afetadas por erros iniciais que possamos ter cometido. Com isso em mente, vamos ver o que temos. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca de ajuda. Conheci One Point. Na plataforma que torna o gerente de projetos você pode notar que a terceira cena não está sincronizada com a narração Então, vamos nos concentrar em corrigir isso. Primeiro, vamos lidar com a transição entre a segunda e a terceira cena. Como você pode ver, o cursor na segunda cena já está fora do quadro neste momento. E como queremos criar uma transição de match cut para a terceira cena, é uma boa ideia cortar essa pré-composição logo quando o cursor sair do quadro Certifique-se de ampliar e excluir também o último quadro. Tudo bem. Então, agora vamos trazer a terceira cena para começar a partir desse exato momento e assistir à animação mais uma vez. Vamos ouvir a narração quando a terceira cena começar e tentar entender o que precisamos ajustar Antes que você perceba, você está se afogando no caos procurando ajuda Conheci um ponto. A plataforma que torna o produto perfeito. Então, a primeira coisa que noto é que toda a animação precisa acontecer um pouco mais rápido porque, como ouvimos, a próxima cena já precisa começar neste momento Então, vamos entrar na cena três e, primeiro, tornar a animação de digitação mais rápida. Vamos terminar no segundo segundo. Em seguida, vamos ajustar toda a animação que acontece com o cursor. Isso significa que também precisamos ajustar a animação de cliques interna. E não se esqueça de ajustar a animação externa da cena Esses são os quadros-chave da caixa de formato branco. Tudo bem? Agora, vamos voltar para a composição principal e ver essa parte mais uma vez. Para obter ajuda. Conheci um ponto. A planta Ling pede ajuda. Conheci, acho que ainda precisamos fazer essa animação um pouco mais rápida e na cena mais cedo. Então, vamos entrar na pré-composição e ajustar os quadros-chave novamente Estou mostrando esse processo porque quero que você se acostume a primeiro garantir que as primeiras cenas do seu projeto estejam sincronizadas com a narração, para que você possa praticar o cronograma da animação de acordo com É muito importante fazer isso nos estágios iniciais antes de prosseguir com a animação do resto das cenas Acho que também podemos tornar essa parte mais suave tornando esse quadro-chave contínuo e acelerando o movimento que acontece nesse momento O ponto principal é que eu não quero que a pausa aconteça aqui Ok, acho que parece melhor. Vamos agora voltar ao master comp e assistir essa parte mais uma vez. E antes que você perceba, você está se afogando no caos, procurando ajuda Conheci um ponto. Afogando-se no caos, procurando ajuda Conheci um ponto. Conheci um ponto. Para obter ajuda. Tudo bem, acho que, neste momento, a animação do Otro já precisa começar a acontecer Então, vamos entrar na cena e, desta vez, mover apenas os últimos quadros-chave dessa animação para os segundos dois e 15 quadros. E, claro, não se esqueça animação de cliques dentro da pré-composição do botão, da animação de cliques dentro da pré-composição do botão, certo? Acho que isso vai funcionar muito bem. E agora podemos continuar trabalhando na animação Otro dessa cena Primeiro, vamos recortar a pré-composição do objeto cursor logo ao finalizar a animação Em seguida, vamos criar uma animação de opacidade simples para o botão, para que ele desapareça logo após a animação do Eu acho que isso parece bom. Vamos fazer o mesmo com o ícone da lupa Podemos cortar essas duas camadas neste momento para que a linha do tempo permaneça limpa Agora, antes de prosseguir, vou colocar a camada de pesquisa aqui no topo para manter minha linha do tempo organizada Tudo bem, agora vamos lidar com a camada de texto que temos aqui Vamos começar sua animação Otro também a partir dos segundos dois e 15 quadros Mas desta vez, para torná-lo um pouco mais interessante, vamos converter essa camada em uma camada de três D e criar uma animação externa em que o texto voa em direção à câmera e sai do quadro Então, primeiro, crie um quadro-chave para a propriedade de posição neste momento Em seguida, avance 1 segundo no tempo. Você pode usar o menu de hora aqui se não quiser arrastar o indicador de hora manualmente. Agora, mova o valor da posição Z até que essa camada saia completamente do quadro. Acho que essa animação parece muito legal e também quero aplicar o mesmo tipo de animação ao botão e ao ícone da lupa Então, vamos primeiro excluir os quadros-chave de opacidade nessas camadas, certificando-se de começar excluindo do último quadro-chave para que o restante mantenha o valor em 100% Em seguida, remova também o resto dos quadros-chave . Tudo bem. Agora vamos criar a mesma animação externa na propriedade position para essas duas camadas Para mostrar esse processo porque esse é o fluxo de trabalho realista dos projetos de design de movimento. Às vezes, criamos animações que parecem boas no início, mas depois percebemos que uma animação diferente parece melhor Isso significa que você geralmente entenderá o que funciona melhor somente depois de testá-lo diretamente no After Effects. E eu estou lhe dizendo isso porque eu quero que você se acostume com situações em que você não sabe exatamente o que fazer. Em vez de adivinhar, comece a experimentar animações diferentes. Pensar nisso na sua cabeça não lhe dará a resposta. Na verdade, testar abordagens diferentes funcionará. Tudo bem. Então, depois de converter essas camadas em três D e criar a animação de posição, você pode ver que a camada do botão parece não estar se movendo Isso acontece porque destruímos essa pré-composição. E, como mencionei nas lições anteriores, agora é um bom momento para falar um pouco mais sobre função de transformações de colapso no After Effects Quando recolhemos uma camada ou uma pré-composição, After Effects nos mostra as informações originais dessa Por exemplo, ao recolher uma camada do Illustrator, After Effects usa os dados vetoriais originais, então vemos a camada com qualidade vetorial total sem perder Ao fechar uma pré-composição, After Effects apresenta as informações originais de dentro No nosso caso, como as camadas dentro da pré-composição não são três camadas D, After Effects ainda as vê como duas D. É por isso que o botão não se comporta como um objeto de três D. Se descompactarmos a pré-composição, After Effects ignorará as informações internas e tratará a pré-composição como uma única camada de três Mas como queremos manter a mais alta qualidade desse botão, manteremos a pré-composição fechada. Para corrigir o problema, tudo o que precisamos fazer é entrar na pré-composição e converter todas as camadas dentro dela em três D. Agora, mesmo com a pré-composição encerrada, o After Effects usará as três informações D internas e o problema Tudo bem, agora, com isso corrigido, vamos ajustar a animação e o tempo do Outro Acho que essa animação pode começar nos segundos dois e 20 quadros. É sempre uma boa ideia adicionar um pouco de atraso entre as animações das diferentes camadas Nesse caso, a caixa de pesquisa branca pode começar primeiro e, em seguida, cerca de cinco quadros depois. O restante das camadas segue. Ótimo. Agora podemos cortar essa pré-composição para terminar na quarta segunda e voltar para a composição principal para ver como tudo funciona Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca de ajuda. Conheci um ponto. Tudo bem, acho que tudo parece ótimo. Com isso, terminamos esta lição e estamos prontos para passar para a próxima. Vai ser uma boa. Nos vemos lá. 14. Criando a cena 4 - Animação do logotipo: Volte. Nesta lição, começaremos a trabalhar na próxima cena. Então, como sempre, a primeira coisa que precisamos fazer é verificar qual deve ser a duração dessa cena. Como você pode ver, a cena deve começar no segundo 11 e terminar nos segundos 17 e 15 quadros. Isso significa que a duração dessa cena não deve durar mais do que 7 segundos. Com isso em mente, vamos criar uma nova composição e começar a trabalhar nela. Podemos chamar isso de cena de composição quatro. Vamos ajustar as dimensões. OK. E agora podemos começar a trabalhar na primeira parte dessa cena, que é a animação do logotipo da empresa. Para isso, vamos abrir a pasta de precomposições no painel do projeto e arrastar a pré-composição do logotipo para nossa linha do tempo. Ótimo. E agora vamos entrar na pré-composição e pensar em uma maneira de animar esse logotipo. Na maioria das vezes, nesse tipo de projeto, a animação do logotipo não precisa ser muito complicada. Portanto, tente observar o logotipo e pensar na maneira mais simples de animá-lo No nosso caso, acho que pode ser ótimo criar uma animação de rotação para os ícones escuros do logotipo que saem da esfera verde atrás dele E para o texto do logotipo, podemos animá-lo da maneira muito comum usada nesse tipo de projeto, que é criar uma animação de traçado revelador E agora quero lembrá-los de algo sobre o qual falamos nas aulas anteriores. Quero lembrá-lo do meu processo de pensar quando tenho uma animação de logotipo para criar ou qualquer outra tarefa de animação que eu precise animar Quando estou olhando para minha tela, eu a divido em várias partes de animação. Nesse caso, estou dividindo a cena em três partes principais A animação dos ícones triangulares, a animação da esfera verde e a animação do texto. Depois disso, decido em qual parte da animação começar a trabalhar primeiro. E, para ser sincero, isso não é muito importante. O mais importante é que eu primeiro crie a animação para cada parte e só depois comece a cronometrar as três partes na minha linha do tempo Essa maneira de pensar é especialmente boa quando precisamos criar uma animação de demonstração para painéis de interface do usuário do software SAS. Com isso em mente, vamos continuar trabalhando, e essa ideia aos poucos ficará mais clara para você durante o processo Primeiro, podemos começar com a parte mais simples, que é animar os triângulos Por conveniência, podemos desativar todas as outras camadas que temos aqui na linha do tempo, para que possamos nos concentrar apenas nos ícones triangulares E, como eu sempre adoro fazer, vamos marcar essas camadas em alguma outra cor para distinguir essa parte da animação do resto das partes que teremos aqui em um futuro próximo. Tudo bem. E agora vamos começar a animá-lo. Para começar, podemos ir para a segunda e criar o primeiro quadro-chave para a propriedade de posição de todas essas camadas E isso porque sabemos que essa é a posição que todos precisam estar no final da animação. Agora podemos ir para o início da linha do tempo e criar quadros-chave neste momento, depois ampliar e ajustar a posição para que possamos fazê-los sair do centro Ótimo. Feito isso, vamos ficar no meio da animação no quadro 15 e fazer com que os ícones se abram ainda mais antes de chegar à posição final. E como eu quero que todos se movam pela mesma distância, em vez de movê-los manualmente, podemos usar o eixo da posição X como uma calculadora e adicionar ao valor atual, digamos, 200 pixels. Para o triângulo superior, em vez de adicionar 200 pixels ao eixo X, precisamos diminuir o eixo Y em 200 pixels. Vamos fazer o mesmo com o resto dos ícones triangulares. Se você não tiver certeza, pode brincar com os valores e entender se precisa aumentar o valor em 200 ou diminuir o valor em 200 para ter a aparência que estamos procurando. Ótimo. Agora temos o início da de rotação estourada animação de rotação estourada que estamos tentando criar Em seguida, vamos criar uma animação de rotação. Para isso, vamos criar uma nova camada nula. Coloque-o acima dos triângulos e centralize o ponto de ancoragem do Em seguida, coloque-o no centro dos ícones triangulares. Em seguida, vamos parar no momento em que a animação já terminou e os triângulos foram colocados em sua posição final e, em seguida, atribuir todos os ícones ao nulo, marcá-los todos em laranja e alterar o nome para ícones nulos Agora vamos ao início da animação e fazer com que o nulo gire uma rotação completa durante a animação pop-up. Incrível. E agora vamos usar o nulo e adicionar uma animação pop-up secundária usando a propriedade scale Crie o primeiro quadro-chave aqui, outro quadro-chave no segundo E no meio da animação, vamos escalar o nulo para, digamos, 120 Vamos diminuir um pouco o zoom para ver como fica. Eu acho que é demais. Vamos definir a escala para 110. Ótimo. Feito isso, vamos começar a trabalhar para melhorar o movimento. Primeiro, vamos abrir todos os quadros-chave que criamos para essa parte da animação e facilitar todos eles. Isso, vamos ver como isso parece. Acho que podemos melhorar a animação ajustando os quadros-chave e criando um movimento um pouco mais rápido. Mas, em vez de fazer isso usando o editor gráfico, quero lembrá-lo de que, quando você tem vários quadros-chave com o mesmo valor em várias camadas, você pode selecioná-los todos e entrar no painel de você pode selecioná-los todos e entrar velocidade do quadro-chave para ajustar a velocidade usando a porcentagem de influência da animação entrada e saída Vamos configurá-lo para 75% para ambos. No editor gráfico, parecerá que arrastamos as alças um pouco para a esquerda e um pouco para a direita Eu acho que parece ótimo. Agora, vamos continuar melhorando o resto dos quadros-chave Na minha opinião, podemos deixar a rotação como está por enquanto. Vamos nos concentrar nos quadros-chave de escala. Vamos começar ajustando a velocidade para 75%, como fizemos a posição dos ícones, e ver como fica Isso parece bom, mas eu quero que os ícones permaneçam um pouco mais quando estiverem todos abertos Portanto, reiniciarei os quadros-chave da escala pressionando F nove ou F e F nove, se você estiver usando Mac, e ajustarei a velocidade usando o editor gráfico, para que a animação comece rapidamente, diminua por um período mais longo no meio e depois acelere novamente no final Acho que fica muito melhor assim. Feito isso, acho uma boa ideia compensar um pouco a animação do ícone Mas antes disso, vamos usar um truque simples para tornar a animação pop um pouco mais interessante Para isso, vamos ampliar o último quadro-chave de escala do objeto nulo e movê-lo cinco quadros para frente Em vez disso, neste momento, vamos reduzir a escala nula para, digamos, 85% Como você pode ver, esse truque simples adiciona um toque agradável ao movimento. Ótimo. E agora vamos continuar animando a esfera verde Primeiro, podemos marcá-la com uma cor verde para separá-la visualmente da parte anterior da animação. Agora, vamos criar uma boa animação de estourar em escala para ele. Tudo bem, depois de criar a animação pop-up, agora estou tentando cronometrar essa animação para começar um pouco depois da animação do ícone do triângulo Como eu disse, é sempre uma boa ideia deslocar um pouco as camadas Neste momento, estou tentando colocá-lo em diferentes momentos e ver como a animação se sente. Também posso alterar a velocidade para 85 em vez de 75 para obter um movimento ainda mais rápido. Acho que fica muito melhor assim. Tudo bem. Então, feito isso, vamos animar a próxima parte da animação do logotipo, que são as letras do logotipo Como eu disse anteriormente, vamos animá-lo em um estilo comum para esse tipo de projeto, que é uma animação de revelação de traços Praticamos essa técnica no curso de animação de logotipo, onde criamos cinco tipos diferentes de animações de logotipo premium Portanto, se você quiser aprender outras maneiras de animar logotipos em seus projetos maiores, sugiro que assista a esse curso. Tudo bem? De volta ao projeto, revelaremos essas letras usando um efeito de traçado e, para usar o efeito de traçado, primeiro precisamos criar uma máscara nessa camada. A máscara deve seguir o formato da carta. A maneira como você começa a criar o traçado afetará a animação reveladora no futuro. Quero que a revelação comece pela parte superior e depois vá para o lado esquerdo. Portanto, vou começar a criar minha máscara dessa forma. Portanto, certifique-se de que a camada esteja selecionada e vamos começar a criar o primeiro ponto aqui. O próximo ponto estará aqui e, antes de soltar o clique, vamos arrastar o mouse para baixo para deixar essa área curvilínea Você pode segurar a tecla shift enquanto faz isso. Vamos continuar fazendo isso até chegarmos à área superior. Nessa área, não precisamos arrastar o mouse. Basta clicar uma vez. O mais importante é não fechar o caminho. Se você fechar o caminho, será um pouco mais difícil criar a animação de revelação. Tudo bem. Então, com isso feito, vamos pesquisar o efeito de traçado e adicioná-lo à camada. Em primeiro lugar, certifique-se de que todas as máscaras estejam verificadas. Em seguida, para o estilo de pintura, escolha revelar imagem original. Depois disso, aumente o tamanho do pincel até ver a letra inteira. Em seguida, verifique se a dureza do pincel está definida para 100%. E agora, para animá-lo, usaremos a propriedade final. No início da animação, vamos criar o primeiro quadro-chave com um valor de 0% Em seguida, vamos avançar 1 segundo e definir o final para 100%. Podemos desativar o resto das camadas para que possamos nos concentrar nelas. Como você pode ver, o início da revelação parece um pouco estranho porque uma grande parte da carta está sendo revelada logo no início Para que pareça um pouco mais sutil, também podemos animar o tamanho do pincel No início da animação, defina o tamanho do pincel como zero no final da animação, defina-o para o número que escolhemos anteriormente, que é 20. Agora teremos uma animação de revelação mais agradável. Em seguida, vamos facilitar todos os quadros-chave e, usando o editor gráfico, fazer com que a animação comece rapidamente e diminua a velocidade no final. Vamos ver como isso parece. Acho que parece bom, e a boa notícia é que não precisamos repetir esse processo para todas as camadas. Podemos simplesmente copiar o efeito e colá-lo no resto das letras. Mas precisamos criar as máscaras para cada letra para que o efeito funcione corretamente. Então, vamos continuar criando a máscara para cada letra que temos na cena para a letra N. Quero que a animação de revelação comece na área superior. Então, vou começar a criar a máscara a partir desse ponto e depois criar o segundo ponto aqui embaixo. Agora, em vez de continuar a máscara pelo resto da carta, é melhor começar uma nova máscara para essa parte da carta. Ótimo. Feito isso, vamos passar para a próxima carta. Desta vez, quero que a animação de revelação comece pela parte inferior, então o primeiro ponto que criarei para a máscara estará aqui embaixo. Então eu vou subir e terminar a máscara acordo com a forma da carta. Vamos continuar fazendo isso pelo resto das cartas. Para o ponto da letra I, podemos ignorá-lo por enquanto, pois criaremos uma animação em escala para revelá-lo junto com o resto das letras. Tudo bem. E agora, para a segunda letra N que temos aqui, podemos copiar as duas máscaras que já criamos para a primeira e colá-las nesta para economizar tempo. Tudo bem, então quando terminarmos criar as máscaras para todas as letras, vamos voltar para a primeira letra e copiar o efeito de traçado dela. Em seguida, vamos selecionar o resto das letras. Verifique se estamos no início da linha do tempo e cole o efeito Ótimo. Agora temos todas as letras animadas e podemos seguir em frente. Vamos recolher todas as camadas do Illustrator que temos aqui. E agora vamos tornar a revelação das letras um pouco mais interessante porque elas estão muito estáticas no momento. Podemos adicionar alguma animação de posição a elas, pois sabemos que a posição final dessas letras precisa estar onde elas estão. Agora, vamos para a segunda e criaremos um quadro-chave para a posição com o valor atual Agora, vamos ao início da animação e traga todas as letras para a esquerda. Acho que isso é o suficiente por enquanto. Ótimo. Então, antes de prosseguir, notei que esqueci de criar uma animação de revelação para o ponto da letra I. Então, vamos fazer isso bem rápido agora Vamos ficar na segunda. Em seguida, abra a propriedade de escala dessa camada. Agora, vamos criar um quadro-chave aqui com o valor atual, depois voltar ao início da animação e definir a escala para zero Para finalizar, vamos facilitar os quadros-chave e criar a mesma velocidade que usamos para a animação reveladora do traçado para o resto das letras. Tudo bem. Feito isso, vamos trazer de volta a propriedade de posição dessa camada para que possamos ver todas as propriedades de posição de todas as letras. Então, vamos facilitar todos os quadros-chave e ajustar a velocidade de acordo com a animação de revelação Vamos ver como isso fica em conjunto. Acho que a moção é boa. Agora vamos melhorar a animação compensando as camadas das letras Vamos fazer com que a letra T seja a primeira da fila a entrar em cena. Vou fazer isso usando o novo recurso. Los bons. Vamos deixar como está por e encontrar o momento certo para começar essa parte da animação. Vamos colocar todas as camadas de letras no quadro cinco e ver como fica. Acho que está tudo bem, mas, na minha opinião, podemos melhorar ainda mais a animação de introdução das letras adicionando uma animação em escala a todas Para facilitar, vamos ficar no quadro cinco. E enquanto todas as camadas estiverem selecionadas, pressione a tecla de colchete esquerdo para trazer todas as camadas até esse momento Agora, vamos bloquear essa camada porque já temos uma animação em escala. Tudo bem. Então, agora vamos selecionar o resto das camadas, pressionar S e criar o primeiro quadro-chave com um valor maior para todas elas. Talvez 120. Vamos tentar 150. Isso é demais. Acho que 135 deveria ter uma aparência melhor. Tudo bem. Agora vamos avançar 1 segundo. Esses são os segundos um e cinco quadros e traga a escala de volta para 100. Agora, a animação deve parecer um pouco mais interessante. Então, vamos desbloquear a camada. Em seguida, selecione todas as camadas novamente para criar um bom atraso. O deslocamento pode ser um pouco maior Na minha opinião, isso parece bom e, com isso, terminamos de animar o logotipo e estamos prontos para seguir em frente Mas antes disso, podemos excluir a camada de fundo que temos aqui. Então, agora vamos voltar à composição da cena quatro e tentar adicionar um toque adicional à animação do logotipo Primeiro, vamos reduzir essa pré-composição e, em seguida, abrir a propriedade de escala para criar uma animação em escala adicional para aprimorar o logotipo. Vamos ampliar um pouco a linha do tempo e criar o primeiro quadro-chave para a propriedade de escala da pré-composição com um valor menor. Acho que 70 deveria funcionar. Depois disso, vamos avançar 1 segundo e criar um quadro-chave com o valor de 100 E, finalmente, vamos ficar no meio dessa animação e definir a escala para um valor maior. Podemos configurá-lo para 110. Agora, vamos facilitar os quadros-chave e definir a velocidade para, digamos, Vamos ver como tudo fica junto. Eu acho que parece ótimo. Tudo bem. Então, agora vamos voltar ao storyboard e ver o que mais precisamos animar a Como você pode ver, finalmente estamos conseguindo animar nosso primeiro painel de interface do usuário no projeto Então, vamos voltar à cena e encontrar a composição desse painel de UI ou tela de UI em nossa pasta Screens dentro da pasta PreComps No nosso caso, precisamos usar a tela do painel. Vamos arrastá-lo para a cena e começar a trabalhar nessa parte da animação. Tudo bem. Então, primeiro de tudo, podemos desativar a pré-composição do logotipo por enquanto, para que possamos nos concentrar apenas na tela De acordo com nosso storyboard, sabemos que essa tela precisa ser apresentada em um pequeno ângulo E, como você provavelmente pode imaginar, podemos obter esse ângulo convertendo essa pré-composição em uma camada de três D. Agora vamos abrir a propriedade de rotação e ajustar o eixo de rotação até obtermos o ângulo que estamos procurando. Como talvez queiramos ampliar diferentes áreas dentro desse painel de interface do usuário, é uma boa ideia reduzir essa pré-composição para mantê-la na mais alta qualidade Mas, como você pode ver, uma vez que fazemos isso, a pré-composição aparece em seus dois ângulos D originais Então, aqui está uma pergunta para você. Como podemos resolver esse problema? Para corrigir isso, precisamos entrar na pré-composição e converter todas as camadas dentro dela em três camadas D. Primeiro, podemos selecionar todas as camadas, reduzi-las para manter sua qualidade e depois convertê-las em três camadas D. Feito isso, podemos voltar à cena principal e ver se tudo funciona perfeitamente bem. Ótimo. Então, agora vamos entrar na pré-composição do painel e continuar preparando toda a tela da interface do usuário para animação A primeira coisa em que devemos nos concentrar agora é pré-compor as camadas que pertencem a cada seção dessa tela da interface do Para começar, podemos bloquear as camadas que sabemos com certeza que não tocaremos. Vamos começar bloqueando a camada principal de fundo cinza. Em seguida, vamos bloquear o menu principal no lado esquerdo. Ótimo. Agora podemos começar a pré-compor as camadas de cada seção, começando pela área do cabeçalho Então, vamos selecionar todas as camadas dessa área e pré-compô-las Como usamos a função de pré-composição, ao selecionar uma das pré-composições dentro da pasta Screens, a nova pré-composição será automaticamente ao selecionar uma das pré-composições dentro da pasta Screens, a nova pré-composição será automaticamente colocada dentro dessa pasta. Estou apontando isso porque ajuda a manter o painel do projeto organizado. Mais tarde, quando pesquisarmos essa pré-composição e a vermos dentro da pasta Screens, você saberá por que ela está Tudo bem, de volta à pré-composição. Agora precisamos dar um nome a ele. Para manter as coisas organizadas, vamos começar o nome com S one, representando a tela um. Em seguida, vamos adicionar o cabeçalho. Agora, depois de pré-compor as camadas relevantes, precisamos reduzir a pré-composição e convertê-la em uma camada de três D. Finalmente, precisamos garantir que o ponto de ancoragem esteja perfeitamente centralizado para essa Para fazer isso, podemos manter pressionada Control ou Command no Mac e clicar duas vezes na ferramenta de ponto de ancoragem enquanto a pré-composição é selecionada. E agora, antes de prosseguir, podemos bloquear essa pré-composição Ótimo. Então, agora vamos lidar com a próxima seção, que são as três caixas abaixo do cabeçalho. Digamos que queremos criar alguma animação para cada uma dessas três seções. Nesse caso, é uma boa ideia pré-compor as camadas que pertencem a cada seção individualmente Para nomear, mais uma vez, começaremos com S one e, em seguida, podemos adicionar algo como o painel um Feito isso, reduzimos a pré-composição e a convertemos em uma camada de três D. Finalmente, precisamos garantir que o ponto de ancoragem esteja perfeitamente centralizado para essa pré-composição. Ótimo, ótimo. Vamos continuar fazendo isso pelo resto das seções. Outro truque para facilitar o processo de seleção é desativar temporariamente as pré-composições recém-criadas Obviamente, você não precisa seguir essas etapas nessa ordem exata. Você pode primeiro pré-compor todas as camadas relevantes e somente depois ajustar os pontos de ancoragem para Você não precisa necessariamente fazer isso imediatamente após a pré-composição Tudo bem, agora que todas as camadas foram pré-compostas, posso converter todas as pré-composições em três camadas D, reduzi-las e ajustar o ponto de ancoragem para cada 11 após a Feito isso, teremos uma configuração muito organizada para animar cada seção dessa tela da interface Dessa forma, você pode inserir facilmente qualquer pré-composição e animar os objetos dentro dela separadamente do resto das camadas Essa é a maneira certa de lidar com painéis de interface de usuário complexos com muitas seções diferentes e muitas camadas pertencentes a cada seção. No nosso caso, não tenho certeza se vamos animar cada seção dessa tela Talvez eu deixe isso para você como lição de casa no final do curso Não quero perder muito tempo animando pequenas seções Prefiro me concentrar em conceitos mais importantes que sejam relevantes para projetos como esse. Ok, então, antes de concluirmos esta lição, vamos garantir que nosso painel de projetos esteja limpo e organizado. Como você pode ver, já estamos criando muitas novas pré-composições e ativos, e teremos ainda mais nas próximas aulas Isso é totalmente normal. Isso também acontece em projetos do mundo real. É por isso que é tão importante manter tudo limpo e organizado para que você possa navegar facilmente pelo seu projeto. Como mencionei anteriormente, as pré-composições que criamos dentro da tela foram automaticamente colocadas na pasta Telas, pois uma das pré-composições dentro dessa pasta foi selecionada quando pré-compusemos selecionada quando pré-compusemos Mas eu não quero que a seção precomposições esteja dentro da pasta Screens Então, selecionarei a pasta de precomposições e criarei uma nova pasta dentro dela chamada painéis, depois moverei todas as pré-composições de seção que criamos neste projeto para essa Já parece muito melhor. As precomposições que não são pré-composições de seção, podemos colocá-las diretamente pasta Vamos também arrastar a pré-composição da placa de vídeo até lá. E para a composição principal nas pré-composições da cena principal, vamos mantê-las do lado de fora para que sejam fáceis Tudo bem, agora, tudo está bem organizado. Vamos salvar o projeto. E com isso, terminamos esta lição. Salve seu projeto mais uma vez antes de passar para o próximo, onde continuaremos trabalhando na cena. Vai ser incrível. Nos vemos lá. 15. Cena contínua 4 - Transição do logotipo e painel: Volte. Nesta lição, continuaremos trabalhando na cena quatro. Vamos fechar todas as pré-composições que não vamos usar primeiro Também podemos fechar o painel antes da composição porque não vamos animar nada aqui. Tudo bem E agora podemos voltar a ativar a animação do logotipo e começar a trabalhar na introdução dessa cena Primeiro, voltarei à placa de vídeo para me lembrar de qual deve ser a duração dessa cena. Vejo que deve começar por volta do segundo 11 e terminar em algum lugar por volta dos segundos 15 e 20 quadros. Isso significa que tenho 4 segundos e 20 quadros para apresentar a animação do logotipo e a tela do painel antes de passar para a próxima parte, onde vemos o gato e a cena das telas divididas Então, com isso em mente, vamos voltar à cena 4 da competição e primeiro mover o painel antes da competição para algum lugar por aqui E agora, até esse ponto, vamos animar o logotipo antes da composição para reduzir e aumentar , para que possamos ter algum espaço para entrar no painel Primeiro, vamos começar com a animação em escala. Então, digamos que após a introdução do logotipo, avançaremos 1 segundo e, em seguida, o logotipo será reduzido para, digamos , 80 ou talvez 75% E agora vamos para o segundo número um e criar uma animação de posição. Vou criar o primeiro quadro-chave aqui. Podemos pressionar para ver todos os quadros-chave que temos aqui. Em seguida, vou para a segunda e coloco o logotipo em algum lugar na moldura. Ótimo. Então, agora vamos selecionar os novos quadros-chave que criamos e facilitá-los. Agora vamos ao editor de gráfico de velocidade e primeiro ajustar a velocidade do quadro-chave da escala anterior como estava A velocidade nesse ponto mudou porque facilitamos o quadro-chave Então, quando fazemos isso, é importante verificar a velocidade em toda a animação. Tudo bem Então, agora vamos fazer esse movimento, começar devagar e ganhar velocidade no final. Vamos ver como isso parece. Isso parece bom por enquanto. Vamos continuar trabalhando na próxima parte, que é criar a animação de introdução para a pré-composição do painel, que também pode começar a partir da segunda Então, primeiro, vamos trazê-lo aqui e agora abrir a propriedade de rotação para trazer a rotação X de volta a zero. E agora, como sei que mais tarde quero adicionar um pouco de profundidade de campo para essa parte, criarei uma nova câmera na cena. Podemos usar a câmera de um nó. E para o tamanho da lente, vamos escolher 35 MM porque isso nos dará o Alright E agora vamos abrir as opções da câmera e verificar se a profundidade de campo está desligada por enquanto. Não queremos trabalhar quando está ligado porque pode tornar o computador mais lento. Como mencionei anteriormente, somente depois de terminarmos de animar a animação essencial, começaremos a adicionar os retoques finais ao nosso projeto, certo Agora, antes de prosseguir, vamos marcar a pré-composição do logotipo em alguma outra cor E agora vamos começar a trabalhar na animação de introdução do painel Então, primeiro, podemos começar animando a posição. E como sabemos que a pré-composição deve ser colocada aqui no final do anim, podemos ir para a segunda segunda e criar o primeiro Em seguida, vamos voltar para a segunda e arrastar a pré-composição para fora do quadro Neste momento, também podemos aproximá-lo um pouco mais da câmera para obter um movimento um pouco mais interessante. Tudo bem, então quando terminarmos de animar a posição, vamos agora adicionar uma animação de rotação Primeiro, vamos tentar ver qual deve ser a rotação no final da animação de introdução Vamos definir o eixo X para -25 por enquanto. Antes de prosseguir com a animação de rotação, acho que podemos derrubar o painel no último quadro-chave E agora vejo que os logotipos são muito grandes. Então, vamos abrir os quadros-chave da pré-composição do logotipo e ajustar a escala e a posição, se Agora temos muito mais espaço para o painel e, com isso, podemos voltar a animá-lo Neste momento, quero que o painel seja colocado em algum lugar por aqui. E agora, para a rotação, quero que ela comece a entrar na cena quando a rotação X for -90 Então, vou criar um quadro-chave no segundo com esse valor. Em seguida, vou para a segunda segunda e defino o valor como -25. Ótimo. Agora podemos começar a trabalhar melhorar a animação e tentar ver como o movimento ficará se ajustarmos a velocidade da animação de posição e rotação de uma forma que comece devagar, ganhe velocidade e depois diminua até o final Vamos ver como fica tudo isso. Acho que a animação é muito rápida. Então, vamos para a terceira parte e trazer os últimos quadros-chave do logotipo e das pré-composições do painel até esse momento Vamos ver isso mais uma vez. Tudo bem. Acho que parece muito melhor, mas na minha opinião, a velocidade de ambas as pré-composições no final deve ser exatamente a mesma Então, vamos selecionar todos os últimos quadros-chave e pressionar F nove para redefinir a atenuação E agora vamos ao editor gráfico e fazer com que o movimento comece devagar. Ganhe velocidade no meio e diminua a velocidade até o final. Não vamos esquecer o quadro-chave de escala anterior da pré-composição do logotipo Eu vou dizer isso de novo. Esse é um processo realista de animação. Sempre tentamos ver como a animação ficará com velocidades e tempos diferentes até conseguirmos algo que gostemos. Ótimo. Então, feito isso, vamos voltar para a placa de vídeo e ver o que precisamos fazer a seguir. Como você pode ver, precisamos preparar essa cena para a introdução do gato Então, com isso em mente, vamos voltar à cena e continuar trabalhando nela. Primeiro, vamos começar criando a animação externa para o logotipo Vamos ficar no quarto segundo e tirar o logotipo da moldura. Quando terminarmos com isso, vamos ao editor gráfico e ajustar a velocidade para obter um movimento um pouco mais suave Sim, acho que parece bom. E agora podemos continuar trabalhando no ajuste da posição do painel antes da configuração. Então, mais uma vez, vamos ter certeza de que estamos na quarta posição e primeiro definir o valor da rotação X como zero. Depois disso, ajuste o valor da posição. Nesse ponto, podemos usar a grade de ação segura para ver se estamos movendo a pré-composição para o lugar certo Vamos garantir que a tela esteja perfeitamente centralizada no quadro Como você pode ver, está centralizado verticalmente, perfeitamente, mas horizontalmente, não está Isso pode acontecer conosco o tempo todo. Às vezes, esquecemos alinhar os objetos na cena, mas não há problema em consertá-los Tudo o que precisamos fazer é ter certeza de que estamos exatamente em um dos quadros-chave de posição dessa pré-composição Em seguida, clique no valor da posição para selecionar todos os quadros-chave e ajustar os valores da posição até centralizar a pré-composição exatamente no meio Se você fizer isso quando não estiver colocado em um dos quadros-chave de posição, criará um quadro-chave desnecessário Tudo bem Então agora eu acho que tudo parece bem. Podemos pressionar você na pré-composição do painel para ver os quadros-chave de uma forma mais conveniente e ajustar a velocidade desse movimento de acordo com o movimento pré-composição do logotipo Preste atenção ao gráfico de rotação. Como você pode ver, perdi o ajuste de sua velocidade, então vou me certificar de selecionar a propriedade de rotação e ajustar a velocidade de acordo com então vou me certificar de selecionar a propriedade de rotação e ajustar a velocidade de acordo com meu movimento. Vamos ver como isso parece. Acho que o painel no final da animação está muito próximo da câmera, então vou ficar no último quadro-chave e ajustar o eixo de posição dessa pré-composição Sim, acho que parece um pouco melhor. Agora, vamos voltar para a placa de vídeo e nos lembrar do que fazer a seguir. Tudo bem. Então, agora precisamos começar a animação de introdução do gato E antes de fazermos isso, vamos voltar à nossa cena e salvar o projeto para salvar todo o progresso que fizemos até agora. Quando terminarmos com isso, para encontrar o presente engraçado, abra a pasta de ativos que você baixou para mim e você o verá lá. E antes de arrastá-lo para o projeto, quero mostrar de onde recebi esse presente Existe um site chamado Giffi onde você pode baixar qualquer tipo de memes e presentes engraçados para usar em Vou deixar o link para este site no arquivo PDF chamado tintas que você pode encontrar na pasta Meus ativos Então, tudo o que fiz foi pesquisar CAT na caixa de pesquisa e comecei a pensar em qual presente seria melhor para o meu projeto. Decidi escolher este, então cliquei nele. Então percebi que esse GIF específico não estava sendo reproduzido em loop E, para minha surpresa, quando vi os presentes semelhantes embaixo, encontrei o mesmo , mas tocando em um loop perfeito para frente e para frente. Então eu cliquei e baixei para o meu computador. Tudo bem Então, agora vamos arrastar esse Jif para o nosso projeto. E agora, para ter esse GIF dentro de uma pré-composição, vamos arrastá-lo até o ícone de pré-composição aqui embaixo no painel do projeto Dessa forma, uma nova pré-composição com essa camada será criada automaticamente Ótimo. E agora vamos pressionar Control ou Command K para inserir essas configurações de composição e ajustar seu tamanho Como você pode ver, o tamanho do PreComp é criado automaticamente acordo com o tamanho da camada Vamos escalar a largura e a altura para 500. Incrível. E agora vamos escalar a camada para caber no novo tamanho da composição. Ótimo. Em seguida, vamos fazer com que essa filmagem pareça um pouco melhor Primeiro, podemos aplicar a faixa de matiz, o efeito de saturação e dimensionar Depois disso, podemos adicionar o efeito de curvas e tornar a filmagem um pouco mais E agora, desde que escalamos a camada, ela perdeu um pouco de qualidade. Para garantir que estamos obtendo a melhor qualidade aqui, podemos ativar a função de qualidade e amostragem Ótimo. Então, agora, uma vez feito isso, vamos lidar com a duração dessa namorada Como você pode ver, por enquanto, a duração original é de 2 segundos e cinco quadros. Então, primeiro, precisamos expandir a duração da competição. Vamos fazer com que dure 10 segundos. Ótimo. Mas agora, como você pode ver, nosso Jif termina em 2 segundos e cinco quadros No nosso caso, precisamos que dure um pouco mais. Há uma maneira rápida de estender a duração de um vídeo em loop no After Effects Para isso, primeiro, vamos selecionar essa camada no painel do projeto. Uma vez feito isso, clique com o botão direito sobre ele e vá para Interpretar imagens. Em seguida, clique em Principal. E agora, como temos um vídeo em loop, podemos fazer com que o loop seja reproduzido mais de uma vez Vamos configurá-lo para dez. Ótimo. E agora tudo o que precisamos fazer é estender a camada. E como você pode ver, o vídeo continua sendo reproduzido, vamos estender a camada até o final da linha do tempo. Incrível. Feito isso, vamos voltar à nossa cena e, antes de incluir essa pré-composição , vamos ajustar o nome Vamos chamá-lo de presente para gatos. Também vamos mover o presente para a pasta Assets. Tudo bem, agora, traga a pré-composição para a cena e vamos continuar trabalhando nela Primeiro, vamos encontrar uma boa posição para isso. De acordo com a placa de vídeo, deveria estar em algum lugar por aqui. Em seguida, vamos adicionar cantos arredondados para essa pré-composição para que ela se encaixe na aparência geral da cena Para fazer isso, insira a pré-composição e agora certifique-se de que nenhuma camada esteja selecionada Em seguida, selecione a ferramenta retangular e clique duas vezes nela. Isso criará um retângulo que se ajusta perfeitamente ao tamanho da câmera Em seguida, verifique se essa forma tem um preenchimento e se o traçado está desativado. Então, vamos arredondar seus cantos. Agora vamos mudar o nome dessa camada para máscara, e agora vamos criar a camada GIF, usar o canal Alpha dessa forma Isso tornará o presente visível somente dentro dos limites da forma. Dessa forma, podemos obter belos cantos arredondados para o presente, que podemos ajustar posteriormente, se necessário. Eu prefiro esse método em vez de criar uma máscara na camada gif que não pode ser personalizada Tudo bem. E agora, antes de prosseguir, vamos ajustar um pouco a saturação porque ela é muito forte, na minha opinião Também vou ajustar um pouco as curvas. Tudo bem. E agora precisamos criar uma animação de introdução para esse presente Mas antes de fazer isso, quero voltar para a placa de vídeo e verificar quanto tempo essa parte deve durar. Então, começa nos segundos 15 e 20 quadros e termina nos segundos 17 e 15 quadros. Isso significa que toda essa parte precisa durar no máximo 2 segundos. Então, vamos voltar ao presente do gato e criar uma animação de introdução simples usando a propriedade de escala E para que pareça um pouco mais interessante, também podemos criar uma animação em escala para a máscara. Ótimo. Então, quando tivermos a introdução, vamos avançar 1 segundo e criar uma animação Otro para ela Podemos copiar os quadros-chave da animação de introdução, colá-los aqui e depois reverter os Agora, vamos facilitar os quadros-chave. E no editor gráfico, faça a introdução acontecer rapidamente e a saída começar devagar Vamos ver como isso parece. Tudo bem. Então, quando tivermos a introdução e a animação Outro, como você deve se lembrar, toda essa parte deve durar no máximo 2 segundos. Então, vamos parar neste momento e os dois últimos quadros-chave para começar a partir daqui. E antes de fazermos isso, acabei notar, olhando a caixa de tempo que a taxa de quadros dessa pré-composição não é de 30 quadros por segundo Isso aconteceu porque criamos essa pré-composição usando o método automático, arrastando o ativo para o ícone de pré-composição no painel do A pré-composição é criada de acordo com as informações do arquivo que você arrastou É importante saber disso, então eu decidi te mostrar esse processo. Vamos corrigir isso bem rápido. Insira as configurações de composição e defina a taxa de quadros para 30. Tudo bem? Então, uma vez feito isso, vamos começar a animação externa a partir do segundo e dos 15 quadros Passa a duração de dois segundos que planejamos, mas está tudo bem. Podemos ver se ele se encaixa no tempo geral da cena e, caso pareça muito longo, podemos ajustá-lo posteriormente. Por enquanto, vamos marcar essa pré-composição com uma cor diferente e encontrar o momento certo para ela começar Neste momento, estou apenas colocando a pré-competição em um local que acho melhor e depois assistindo à animação geral Se não parecer certo, vou arrastá-lo para outro momento. No nosso caso, acho que podemos começar essa pré-competição a partir da quarta segunda Tudo bem? Acho que é um bom momento para começar essa pré-composição, mas, como você pode ver, a aparência geral da cena parece um pouco Para melhorá-lo, podemos criar um leve zoom ou diminuir o zoom para a câmera usando a propriedade position. Então, vamos ao início da animação e criaremos o primeiro quadro-chave lá Em seguida, vamos chegar a um ponto no tempo em que a animação definitivamente será finalizada e criaremos uma animação suave de redução de zoom. Vamos ver como tudo isso fica junto. Como você pode ver, isso adiciona um pouco mais de movimento à aparência geral. Caso a redução do zoom seja quase imperceptível, você pode ajustar o último quadro-chave para fazer com que a câmera se mova ainda mais para trás Vamos assistir a essa animação mais uma vez. Acho que parece muito melhor, mas na minha opinião, podemos começar a animação do presente um pouco mais cedo, digamos, partir do terceiro segundo, porque lembro que toda essa cena não deve durar mais do que 5 segundos. Tudo bem Então, com isso feito, podemos salvar o projeto e seguir em frente para ver como essa cena ficará junto com o resto das cenas no Master Comp. Então, vamos voltar ao Master Comp e trazer a cena quatro para a linha do tempo Neste ponto, só precisamos encontrar o melhor momento para a cena começar. Estou observando cuidadosamente o que está acontecendo na cena anterior e tentando começar a próxima de acordo. Depois de encontrar um bom momento, é uma boa ideia assistir à animação e ver se a transição funciona bem. Na minha opinião, parece bom, então agora vou assistir à animação mais uma vez. Mas desta vez, enquanto ouve a narração, para ver se tudo está sincronizado perfeitamente É muito importante fazer isso antes de prosseguir com a animação da próxima cena. Procurando ajuda. Conheci One Point. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso com um único ponto. Tudo bem. Então, depois de assistir à animação com o Voiceover, notei que a cena número quatro deveria começar um pouco Vamos começar essa pré-composição a partir do 11º segundo e assisti-la novamente enquanto ouvimos o Voiceover. Coma um ponto. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com um ponto, conheci um ponto. A plataforma que faz P. Sim, acho que devemos deixar assim. Isso significa que, neste momento, cena três já deve terminar. Então, vamos entrar nessa pré-composição e primeiro abrir todos os quadros-chave que temos aqui Agora, vamos começar a encurtar a última parte da animação em alguns quadros Selecione todos os quadros-chave e mova-os dez quadros para trás Também podemos retroceder alguns quadros a esses outros quadros-chave Mas, por enquanto, vamos deixar como está e ver como fica a animação depois de ajustar a primeira parte da animação Parece bom. Antes de prosseguir, não se esqueça de ajustar a animação do clique para começar a partir desse momento. Tudo bem. E agora vamos tornar a animação externa um pouco mais rápida trazendo os últimos quadros-chave alguns quadros para trás Vamos levá-los à marca de 1 segundo. Ótimo. E agora, depois de ajustar a animação, é sempre uma boa ideia assistir novamente ao movimento e ver se está certo. Precisamos ter certeza de que não é muito rápido ou muito lento. Acho que a moção está bem. Agora vamos voltar para a composição principal e ver a animação novamente com a narração Procurando ajuda. Conheci um ponto. Procurando ajuda. Conheci um ponto. A plataforma não é incrível. Então, quando tivermos o tempo adequado para a narração, agora podemos entrar na cena quatro e adicionar uma camada de fundo Vamos usar a animação de fundo em gradiente que criamos para este projeto Você pode encontrá-lo na pasta de ativos no painel do projeto. Agora, vamos criar uma boa introdução para esse plano de fundo. Minha maneira favorita de criar uma animação de introdução para uma camada de fundo é criando uma máscara de elipse e uma animação de introdução para uma camada de fundo é criando uma máscara de elipse e animando-a. Deixe-me mostrar o que quero dizer. Primeiro, verifique se a camada está selecionada e, em seguida, escolha a ferramenta Elipse. Clique duas vezes na ferramenta Elipse para criar uma máscara de elipse Agora vamos clicar duas vezes na máscara e ajustá-la para parecer mais proporcional Mantenha o comando do controlador ao fazer isso. Graças à grade de ação segura, posso ver onde ajustar o formato da máscara para obter uma aparência arredondada. Ótimo. Então, uma vez feito isso, vamos abrir as propriedades da máscara e animar a propriedade de expansão da máscara Como você pode ver, ele cria uma forma interessante para a máscara. Gosto muito da aparência da forma da elipse. Tudo bem Então, vamos definir o valor da expansão até que não vejamos mais a camada. Não o ajuste acima do necessário. Agora, crie o primeiro quadro-chave no início da animação Depois disso, avance 1 segundo e ajuste o valor até vermos toda a camada de fundo. E, mais uma vez, não aumente o valor além do necessário. Tudo bem Então, agora vamos facilitar os quadros-chave e fazer com que essa animação comece rapidamente desde o início. Vamos ver como isso parece. Isso parece ótimo. Agora, a última coisa que podemos fazer aqui é criar um pequeno deslocamento entre a animação de introdução de fundo e o resto das partes da animação nesta cena Vamos começar as outras pré-composições a partir do quadro dez. Talvez o quadro cinco e veja como ficará primeiro com o atraso de cinco quadros . Eu acho que parece bom. Agora vamos voltar à composição principal e assisti-la junto com a narração. Conheça um ponto. A plataforma que torna o gerenciamento de projetos tão simples, percebi que a pré-composição do CAT deveria na verdade, começar por volta dos 15 segundos Então, vamos mover o indicador de reprodução para 15 segundos e dez quadros, entrar na cena quatro e fazer alguns pequenos ajustes Primeiro, vamos fazer com que o Cat precomp comece a partir desse momento Ótimo. Agora, vamos tornar a animação do painel um pouco mais lenta aqui Se começar nos segundos três e cinco quadros, vamos terminar nos segundos cinco e cinco quadros, que serão exatamente 2 segundos de animação. Vamos assistir novamente à animação e garantir que ela não pareça muito lenta. Eu acho que está tudo bem. Agora, vamos voltar à composição principal e assisti-la novamente com a narração para confirmar se tudo está Conheça um ponto. O enredo. Forma que torna a progenitura tão simples. Até seu gato faz isso. Com um ponto, faça com um ponto. Incrível. Acho que tudo funciona muito bem. Agora, podemos prosseguir com a criação da animação Otro, que precisa acontecer por volta do segundo 17 Por enquanto, vamos desligar a narração para que ela não nos distraia ao revisar Trabalharemos nisso na próxima lição. Vai ser incrível. Então nos vemos lá. 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. 16. Criação da cena 5 - Animação com divisão de telas: Estou de volta. Vamos começar esta lição indo até a placa de vídeo para verificar qual é a próxima cena que precisamos animar A próxima cena é a parte em que vemos todas as telas da interface do usuário e começa nos segundos 17 e 15 quadros. Agora vamos ver onde isso termina. Ele termina nos segundos 19 e 15 quadros. Isso significa que essa animação deve durar 2 segundos. Um rápido lembrete de que a ideia para essa composição de telas divididas que tive ao assistir a um ótimo vídeo de referência no YouTube é um lembrete de como é ótimo ver muitos outros projetos para me inspirar Tudo bem, de volta à aula. Outra coisa que podemos aprender com a placa de vídeo é que, após a animação das telas divididas, precisamos entrar na tela do projeto E com isso em mente, vamos voltar à nossa cena e continuar animando nesta linha do tempo, em vez de criar uma nova pré-composição por motivos óbvios Como precisamos continuar a animação enquanto ainda vemos a tela do painel para a parte de animação dividida, é melhor continuar trabalhando nessa linha do tempo e não criar uma nova cena E antes de prosseguir, vamos organizar nossa linha do tempo aqui Primeiro, podemos recortar o logotipo antes da composição até o ponto em que não o vejamos mais na cena Depois disso, podemos fazer o mesmo com o gato antes da composição. Então, vamos encontrar o ponto no tempo em que essa animação já terminou e recortar essa camada até esse ponto. Por fim, vamos trazer a pré-composição aqui para ter um layout mais cronológico em Agora, vamos ver o momento em que achamos que será um bom momento para começar a transição para a próxima parte da animação, que apresentará será um bom momento para começar a transição para a próxima parte da animação, todas as telas da interface do usuário Podemos começar a partir do segundo sétimo. Feito isso, vamos abrir a pasta precomps e a pasta Screens dentro dela para encontrar a tela de UI do projeto que precisa ser apresentada na próxima cena E agora vamos trazê-lo para nossa linha do tempo. E pense em uma maneira de organizar a tela com o resto das telas para a cena em tela dividida. E antes de fazer isso, vamos também abrir a posição da câmera e trazer o último quadro-chave para esse momento , pois a partir desse momento, criaremos uma transição para a próxima parte da animação Tudo bem. E agora vamos colocar os projetos em pré-composição no cronograma Em seguida, vamos converter essa camada uma camada de três D e encontrar o lugar para ela em nosso espaço de três D. Para ver o que estamos fazendo melhor, vamos mudar a exibição para uma visualização personalizada para que possamos ver os três espaços D com mais clareza. Como você pode ver, a pré-composição do projeto agora está localizada na frente do painel, o que não é o que precisamos Queremos que fique para trás. E como sabemos disso mais tarde, adicionaremos todo o resto das telas. Será uma boa ideia manter o espaço entre cada tela igual para fazer isso. Primeiro, vamos ver o valor da posição da pré-composição do painel Agora, vamos definir esse valor exato para a pré-composição do projeto, que fique alinhado com a posição do painel E agora vamos usar a caixa de valores como calculadora e decidir qual deve ser a distância da tela do projeto da tela do painel. Vamos tentar movê-lo em 250 pixels. Acho que a distância está boa. E agora vamos continuar trazendo o resto das telas para a cena. E agora eu quero compartilhar meus pensamentos com você. Eu sei que o resto das telas dessa cena precisam ser apresentadas por um tempo muito curto. Também sei que, se eu colocar todas as pré-composições das telas na linha do tempo, o After Effects terá dificuldade em visualizar Com isso em mente, acho que será uma boa ideia, em vez de usar as pré-composições das telas, usar os arquivos de IA dos designs dessas telas que importamos no início do projeto Para o After Effects, é muito mais fácil renderizar um arquivo do Illustrator Em vez de uma pré-composição com vários arquivos do Illustrator dentro. Eu não fiz isso na tela do projeto porque sei que essa tela deve ser animada na minha próxima parte de animação. Portanto, eu trouxe a pré-composição da tela e não sua camada achatada do Tudo bem. Então, com isso em mente, vamos continuar trabalhando, e o que acabei de explicar ficará muito mais claro para você agora Então, vamos trazer a próxima tela para a linha do tempo e ajustar sua posição Primeiro, nós a convertemos em uma camada de três D. Em seguida, vamos usar o valor da posição do eixo Z da última tela e adicionar 250 pixels a ele. Dessa forma, colocaremos essa tela 250 pixels após a tela anterior. OK. Agora vamos passar para a próxima. Para tornar esse processo um pouco mais rápido, em vez de arrastar a próxima tela para a linha do tempo e ajustá-la, podemos duplicar a última tela da linha do tempo, selecionar a inferior e ajustar o valor da posição do eixo Depois disso, enquanto essa camada é selecionada na linha do tempo, podemos ir ao painel do projeto, selecionar a próxima tela, segurar Alt ou opção e arrastá-la para cima da tela selecionada na linha do tempo para substituí-la Ótimo. E agora vamos repetir esse processo para o resto das telas. Tudo bem. E agora podemos trazer de volta a visão para a câmera ativa e continuar trabalhando na cena. A próxima coisa que podemos fazer é colocar todas as novas telas na linha do tempo a partir da sétima segunda, já que esse é o momento em essa parte da animação começará, então podemos colocar todas as telas acima do painel antes da composição para manter nossa linha do tempo organizada. Tudo bem. E agora vamos preparar a tela do projeto para animação. O que quero dizer com isso é que precisamos ter certeza de que essa pré-composição funcionará corretamente, caso queiramos desmontá-la Como você pode ver, depois de desmontar a pré-composição, vemos E é porque temos uma câmera aqui que agora está observando dentro da pré-composição e não interage com as camadas dentro da pré-composição, pois todas são Então, para corrigir isso, tudo o que precisamos fazer é entrar na pré-composição e reduzir todas as camadas e convertê-las em três camadas D. Dessa forma, a câmera na cena principal os verá. Feito isso, vamos voltar à cena e converter o resto das telas em três camadas D. Também podemos derrubá-los. Ótimo. E agora vamos começar a trabalhar na animação em telas divididas. A primeira coisa que podemos fazer é criar um novo objeto nulo. Em seguida, vamos convertê-la em uma camada de três D, colocá-la acima de todas as telas e renomeá-la para telas nulas Depois disso, precisamos colocar esse nulo no meio de todas as telas Por conveniência, podemos usar a visualização personalizada ou, para uma visualização ainda melhor, podemos escolher a vista superior. Como temos oito telas, devemos colocar o nulo em algum lugar por aqui para que possamos ter quatro telas antes e quatro telas depois E para saber exatamente onde colocá-lo no meio, podemos usar o eixo de posição Z da tela antes dele. Vamos copiar esse valor da tela e colá-lo no nulo Em seguida, altere o eixo de posição Z dos nulos de acordo. Se a distância entre as telas for de 250 pixels, isso significa que precisamos mover o nulo pela metade desse número Então, vamos adicionar 125 pixels ao eixo Z dos nulos atuais. Ótimo. E uma vez feito isso, precisamos transformar todas as camadas da tela em nulo Mas antes disso, vamos dividir a pré-composição do painel para que possamos ter essa pré-composição separadamente para a primeira parte de animação da cena e outra separada para a parte de animação em que estamos trabalhando Incrível. E agora vamos atribuir todas as telas ao valor nulo. Tudo bem. E agora vamos voltar para a visualização ativa da câmera e animar a cena Podemos começar com o nulo a partir daqui. OK. E agora vamos abrir a propriedade de rotação e encontrar o eixo certo para animarmos No nosso caso, vamos animar o eixo y. Vamos criar o primeiro quadro-chave aqui, depois avançar 1 segundo e girá-lo em -69 Antes de prosseguirmos, podemos abrir os quadros-chave dessa pré-composição e excluir todos os Fazemos isso porque criaremos uma animação de rotação e posição completamente diferente para essa pré-composição, a fim de obter a aparência curvilínea almejamos quando a animação dividida Com isso dito, vamos abrir a propriedade de rotação de todas as telas e ver qual eixo precisamos animar. É o eixo X. Então, vamos criar um quadro-chave para todas as camadas com o valor atual Neste momento, podemos pressionar você para ver apenas os quadros-chave Depois disso, vamos passar para a segunda e começar a ajustar o eixo X para cada camada da tela para obter uma aparência curvilínea proporcional Vamos girar a tela do painel em 25 graus. E para a última tela, que é o navegador de arquivos, vamos fazer o oposto. Defina para -25 Para a tela anterior, podemos definir a rotação para -20. Para o anterior, podemos definir a rotação para -15. Para o próximo menos dez. Como você pode notar, estou girando as camadas em cinco graus para que a curva pareça proporcional Tudo bem. E agora, para as primeiras quatro telas, podemos definir essa como cinco. O próximo será definido para dez. E para o final, podemos definir a rotação para 15. Isso parece bom, e estamos quase lá. Agora, para melhorar a aparência, também podemos criar uma animação de posição. Então, vamos selecionar todas as telas e pressionar P. Agora, crie um quadro-chave no início da animação Em seguida, vamos passar 1 segundo e começar a ajustar a posição de cada tela para obter aquela bela aparência curvilínea Neste momento, como há telas um pouco maiores que as outras, estou apenas tentando mover cada camada intuitivamente até conseguir algo que eu goste Tudo bem, acho que está tudo bem por enquanto. Vamos continuar criando a animação da tela do projeto saindo dessa lista, já que essa é a tela que precisa ser mostrada na próxima cena Então, em um momento, avançaremos 1 segundo e ajustaremos a pré-composição, posição e rotação da tela do projeto Mas antes de fazer isso, vamos fazer com que o resto das telas saiam do quadro. E podemos fazer isso usando a camada nula. Então, vamos ficar no segundo oito, depois pressionar P, criar um quadro-chave aqui e depois ir para o segundo nove e retirar o nulo do quadro até que nenhuma tela esteja visível no Ótimo. E agora vamos ter certeza de que estamos dividindo os projetos antes da composição na segunda oitava, já que queremos que eles não sejam afetados pelo Precisamos animar essa parte separadamente para que possamos inserir a próxima parte da animação de forma muito mais conveniente Vamos garantir que não esteja relacionado ao nulo. Ótimo. E agora podemos animar facilmente essa camada sem nos preocupar com o movimento nulo E antes de animá-lo, certifique-se de excluir os primeiros quadros-chave e manter apenas os últimos para que o precom permaneça na posição atual Feito isso, agora podemos ir para a segunda nona e animar essa camada Primeiro lote, vamos nos certificar de definir o eixo de rotação X como zero. Depois disso, vamos ajustar o eixo de rotação Y até que a tela da interface fique voltada para a câmera. Ótimo. Depois de terminar de ajustar a rotação, vamos começar a lidar com a posição Vamos pressionar você duas vezes para que possamos ver todos os quadros-chave. Agora, vamos abrir a grade do Action Safe e começar a ajustar a posição Podemos colocá-lo no centro da composição por enquanto. Não se preocupe com a colisão que acontece aqui. Nós vamos lidar com isso em um minuto. Por enquanto, vamos nos concentrar em encontrar uma boa posição para essa tela de interface do usuário. Se você não tiver certeza de como a cena deve ficar, é uma boa ideia voltar para a placa de vídeo e verificar novamente a cena Vejo que também precisamos adicionar uma camada de texto aqui. É importante porque agora eu sei que preciso deixar algum espaço para uma camada de texto na cena. Também vamos aproveitar essa oportunidade para verificar por quanto tempo da parte da tela da interface do usuário do projeto animação da parte da tela da interface do usuário do projeto deve ser apresentada. Começa em 19 segundos e 15 quadros e termina na marca de 24 segundos. Isso significa que temos um pouco mais de 5 segundos para apresentar essa parte da animação. Tudo bem. Então, com isso em mente, vamos voltar à cena e continuar trabalhando. Então, agora, a partir deste momento, temos 5 segundos para apresentar essa parte da tela da interface do usuário. Vamos colocar a pré-composição uma posição semelhante à referência sobre a falei quando falamos sobre a criação do storyboard Tudo bem, de volta à aula. Vamos avançar 1 segundo e depois abrir todas as propriedades de rotação. Agora, vamos tentar brincar com os diferentes eixos até obtermos algo de que gostemos No nosso caso, vejo que também precisamos animar o eixo de rotação Z. Portanto, primeiro, vamos criar um quadro-chave no segundo nove e depois ir para o segundo dez e alterar o valor Tudo bem. Acho que o ângulo é perfeito. Agora, vamos trazer a posição e não se esqueça de mover a pré-composição para mais perto da câmera Neste ponto, estou apenas tentando obter um bom ângulo e garantir que a composição esteja equilibrada. Então, estou brincando com todas as propriedades que animei até obter um bom resultado, certificando-me de ter espaço suficiente para a camada de texto que precisa estar nessa parte da animação. Mamãe. Vamos ver como isso parece. Eu acho que parece ótimo. Vamos selecionar a pré-composição e pressionar você para ver apenas os quadros-chave Tudo bem. E agora vamos abrir o script e copiar o texto relevante. Vamos verificar isso na placa de vídeo. No nosso caso, precisamos apenas dessa parte do script por enquanto. Então, vamos copiá-lo e colá-lo na cena. Agora vamos ajustar o texto. Vamos usar uma versão em negrito da fonte. Em seguida, vamos mudar a cor para branco. E para o tamanho da fonte, defina-o como 40. Finalmente, vamos garantir que o parágrafo esteja alinhado ao centro e, em seguida, alinhá-lo horizontalmente ao centro da composição E acho que podemos colocá-lo em algum lugar por aqui, certo? E agora vamos colocar o texto acima da camada nula e trazê-lo para começar a partir da segunda nove Podemos ajustar um pouco a posição. Posteriormente, animaremos todas as camadas de texto em nossas cenas. Por enquanto, vamos nos concentrar em continuar animando o resto das partes essenciais da animação Como você deve se lembrar, a parte da animação que apresenta a tela da interface do usuário do projeto deve durar 5 segundos. Isso significa que agora precisamos criar uma animação inspiradora para cada seção nessa tela de interface do usuário Como vimos, essa animação é muito usada nesse tipo de projeto. Então, vamos aprender como fazer isso. Mas antes disso, percebi que sentia falta adicionar um quadro-chave de posição às mensagens na camada de tela Tudo bem, agora vamos começar a criar a animação edificante Vamos descobrir o momento certo para que essa animação comece. Devemos começar a partir da décima segunda. Agora vamos inserir os projetos antes da composição. Aqui nesta linha do tempo, vemos que a animação começará a partir dos três segundos. Ótimo. Então, primeiro, vamos começar bloqueando a camada cinza BG. Assim, podemos selecionar o resto das camadas facilmente. Também podemos bloquear a camada esquerda do menu. E agora vamos descobrir quais camadas precisamos animar. No nosso caso, essas são as camadas das caixas do projeto. Então, vamos selecionar todos eles e marcá-los com uma cor diferente. Podemos ativá-los e desativá-los para garantir que a seleção esteja correta. Ótimo. Agora, vamos marcá-los em laranja. Agora, vamos abrir a posição para todos eles e criar um quadro-chave neste momento Em seguida, vamos avançar 1 segundo e criar outro quadro-chave aqui também Em seguida, vamos para o meio da animação e ajustamos a posição do eixo Z para trazê-los à tona. Podemos voltar à cena para ver como fica com o ângulo que criamos. Acho que é demais. Vamos derrubar todos eles um pouco. Vamos verificar isso mais uma vez. Sim, acho que parece melhor. Agora vamos voltar para a pré-composição e ajustar o movimento. Vamos fazer com que a animação comece rápido, diminua a velocidade no meio e ganhe velocidade no final. Ótimo. E agora vamos criar um deslocamento suave entre as camadas. Estou selecionando cada camada para garantir que todas estejam organizadas cronologicamente, uma após a outra Sim, parece que a ordem no painel de camadas está correta. Então, agora vamos decidir se a caixa superior esquerda iniciará a animação primeiro. Isso significa que selecionaremos o restante dos quadros-chave e os moveremos, digamos, dois quadros para frente Podemos fazer isso manualmente enquanto pressionamos a tecla Alt ou a opção e usamos a seta para a direita. Ou podemos fazer isso usando o novo recurso. Vou desfazer minha ação e ampliar um pouco para mostrar como. Se você quiser usar o novo recurso, lembre-se de que a ordem de sua seleção afetará a direção do deslocamento Vamos avançar dois quadros. Então, se eu começar a selecionar na camada superior, segure Control e Alt para ativar o novo recurso. O deslocamento começará na camada superior. No nosso caso, queremos que comece com a camada inferior. Portanto, iniciarei a seleção na camada inferior. Agora, estou me certificando de que os quadros-chave da camada chamada camada 353 estejam atingindo a posição dos indicadores de tempo Isso indicará que o deslocamento é de dois quadros de distância Acho que podemos aumentar a compensação. Ótimo. E agora, antes de prosseguirmos, vamos voltar à cena para ver como isso parece. Parece bom, mas acho que toda essa parte da animação é muito rápida e dura muito pouco tempo. Sabendo que essa parte deve durar quatro ou 5 segundos, tenho certeza de que precisamos tornar essa animação um pouco mais lenta Então, vamos voltar para a pré-composição da tela e desacelerar a animação Vamos nos concentrar nos quadros-chave da camada inferior. Por enquanto, essa animação dura 1 segundo. Começa no segundo três e termina no segundo quarto. Isso também se aplica ao resto das camadas. Todas as animações duram 1 segundo. Então, agora vamos para o segundo quinto. Em seguida, selecione todos os quadros-chave e agora segure Alt ou option e arraste o último quadro-chave para aumentar proporcionalmente distância entre os quadros-chave Ao fazer isso, preste atenção quando o último quadro-chave da camada inferior atingir a marca de cinco segundos Isso indicará que sua animação agora dura 2 segundos e, como você já deve entender, também se aplica ao resto das camadas. É assim que diminuímos a velocidade da animação de todas as camadas de 1 segundo para 2 segundos. Feito isso, vamos voltar à cena e ver como fica. E o mais importante, veja que agora a animação termina no momento certo. A animação termina por volta do segundo 12, o que é ótimo porque agora temos alguns segundos restantes para criar a transição para a próxima parte da animação. Para a próxima parte da animação, precisamos criar uma animação de clique com o cursor em uma das caixas do projeto, que depois disso nos levará à segunda tela de interface do usuário do projeto. Então, vamos começar a trabalhar nessa parte agora. Então, primeiro, vamos entrar na segunda tela do projeto e tentar entender o que precisa acontecer. Como você pode ver aqui, atualmente estamos dentro um projeto chamado site dribble Isso significa que precisamos criar uma animação de clique para essa caixa de projeto na primeira tela do projeto. Depois de entendermos o fluxo, podemos ir para a segunda tela do projeto e começar a pensar em uma maneira de criar uma animação de introdução para ele No nosso caso, vamos nos concentrar em criar algum tipo de animação para essas seções de tarefas. Mas, como você pode ver, acabei notar que essas caixas não têm preenchimento. Então, antes de começar a animar, deixe-me corrigir isso bem rápido No seu caso, como você está usando meus arquivos finalizados, todas as seções já foram corrigidas Eu só queria mostrar a vocês que às vezes perdemos alguma coisa no Illustrator, e está tudo bem Então, para corrigir isso, tudo que eu preciso fazer é encontrar esse design no Illustrator, selecionar essas caixas e ter certeza de adicionar um preenchimento branco a elas. Vou acelerar esse processo por enquanto. Uma vez feito isso, não vou esquecer de salvar o arquivo. Depois, posso voltar ao After Effects e esperar alguns segundos até que as alterações sejam atualizadas aqui. Tudo bem. E agora vou salvar meu projeto aqui no After Effects também, e podemos continuar trabalhando. Então, neste momento, já sabemos o que precisamos fazer para o resto da cena. Mas antes de começarmos a criar uma animação complexa, é uma boa ideia voltar à composição principal e ver a animação que criamos junto com a narração para ver em que momento devemos começar a criar a animação do fluxo de demonstração Isso torna o gerenciamento de projetos tão simples que até mesmo seu gato poderia fazer isso. Com um ponto, você tem uma ideia cristalina de tudo o que sua equipe está trabalhando em todo o seu projeto. Ok, quando você obtém uma visão geral clara de tudo o que sua equipe está trabalhando em todo o seu produto. Acho que podemos começar a partir do segundo 22. Isso significa que a animação edificante das caixas do projeto já deve terminar aqui Então, vamos entrar na cena e, em seguida, inserir a pré-composição do projeto para encurtar essa parte da animação até a localização dos indicadores de tempo, o que, nessa linha do tempo, significa que essa animação deve terminar por volta do quarto segundo Então, basicamente, nossa primeira duração dessa animação foi perfeita. Eu queria mostrar essa situação porque às vezes achamos que nossa animação deveria ter uma certa aparência. Mas o mais importante é fazer com que a animação se encaixe na narração, em vez de apenas fazer com que pareça o que sentimos É por isso que é tão importante sempre voltar à composição principal e verificar novamente o projeto após cada parte da animação que você terminar Com um ponto, você obtém uma visão geral clara de tudo em que sua equipe está trabalhando em todo o seu Alright Agora, a animação é sincronizada com a narração e estamos prontos para começar a trabalhar na animação de fluxo de demonstração Isso deve começar por volta do segundo 22. Vamos entrar na cena e começar essa animação a partir do momento em que todas as caixas já caíram Coloque o indicador de tempo aqui. E agora vamos começar a criar o movimento de clique na primeira caixa do projeto. Como sabemos que precisaremos de alguns quadros para que a animação de cliques aconteça, vamos garantir que essa pré-composição permaneça imóvel por alguns Para fazer isso, precisamos criar quadros-chave para todas as propriedades animadas com o valor atual. Agora, vamos fazer com que essa pré-composição permaneça por dez quadros. Acho que deve ser tempo suficiente para a animação de cliques. Então, se estivermos no quadro 12, vamos passar para o quadro 22, que faz dez quadros no total. Por fim, vamos criar outro conjunto de quadros-chave para todas as propriedades animadas com o valor atual Esta parte será nosso lugar para criar a animação de cliques. Caso você queira ajustar o ângulo ou a posição da pré-composição antes do início do fluxo de demonstração, não se esqueça de atualizar os últimos quadros-chave adequadamente para manter esse Vamos praticar isso agora mesmo. Podemos mudar o ângulo brincando um pouco com os valores das propriedades animadas até criarmos um ângulo mais interessante. Tudo bem. Então, agora, uma vez feito isso, você pode simplesmente excluir esses quadros-chave e copiar e colar os novos aqui. Tudo bem. E agora, a partir desse momento, vamos entrar na pré-composição do projeto e encontrar a primeira caixa do projeto para criar uma animação de clique para ela. Aqui está. Abra a propriedade de escala e crie um quadro-chave com o valor atual Em seguida, avance dez quadros e crie o mesmo quadro-chave Agora vamos ficar no meio dessa animação e reduzir a escala da camada. Vamos experimentar nossos 80. Ótimo. E agora vamos facilitar os quadros-chave e ver como isso fica Vamos tentar tornar esse movimento um pouco mais rápido. Isso é melhor. Ótimo. Agora, vamos voltar à cena. E a partir do momento em que a animação do clique termina, vamos mudar o ângulo dessa pré-composição para um ângulo diferente que ficará melhor para a próxima tela da interface que precisa ser apresentada após a animação do clique Digamos que a animação de mudança de ângulo dure 1 segundo. Então, vamos usar essa caixa de tempo e alterar os segundos para 12. Dessa forma, o indicador de tempo avançará exatamente 1 segundo. Ótimo. Neste ponto, vamos ajustar todas as propriedades que animamos para obter um bom ângulo frontal. Usando a grade de ação segura, é fácil alinhar a pré-composição ao centro. Tudo bem, acho que parece bom. Agora sabemos que, ao apresentarmos a próxima tela, também precisamos alterar o texto que temos aqui na cena. Então, vamos dividir a camada de texto desde o início da transição e, em seguida, abrir o script para copiar o texto relevante. Vamos clicar duas vezes na camada de texto e colar o novo texto. Ótimo. Então, agora preparamos nossa transição. E antes de continuar, vamos verificar se ele se sincroniza perfeitamente com a narração Também podemos confirmar que ele afunda verificando se o texto está mudando no momento certo Pré-visualização de tudo em que sua equipe está trabalhando, todos os seus projetos, todas as suas tarefas, tudo em um só lugar. Tudo bem, acho que tudo parece ótimo. E agora estamos prontos para voltar à cena e começar a trabalhar na criação da animação de introdução para a tela de interface do segundo projeto A transformação precisa começar a acontecer logo após a animação do clique. Nesse caso, criaremos a animação de introdução da próxima tela dentro da pré-composição do projeto Primeiro, crie uma animação externa para todas as seções dessa tela e, depois disso, criaremos uma animação de introdução para a próxima Em seguida, sincronizaremos essas duas partes da animação para criar uma transição suave. E, finalmente, teremos aquela animação de fluxo de demonstração para essa tela de interface do usuário. Continuaremos com isso na próxima lição. Vai ser incrível. Então nos vemos lá. 17. Como criar a animação de outro para a tela de projetos: Volte. Começaremos esta lição trabalhando na animação Otro para a tela do projeto Isso precisa começar a acontecer logo após a animação do clique. Então, vamos ficar aqui e começar a pensar em uma maneira de remover todas as camadas para que possamos começar a trazer as camadas da próxima tela. Tudo bem. Então, com isso em mente, vamos começar a criar uma animação externa para a seção principal desta tela de interface Para fazer isso da maneira mais conveniente, podemos usar a caixa branca desta seção. Deixe-me mostrar o que quero dizer. Primeiro, vamos colorir com uma cor diferente para que possamos encontrá-la rapidamente. Em seguida, podemos selecionar todos os objetos e camadas relacionados a essa seção e colocá-los na caixa branca principal. Uma vez feito isso, podemos criar uma animação externa somente para essa camada Em seguida, podemos passar a criar uma animação externa para o resto das seções Com isso dito, vamos abrir a posição da caixa branca principal desta seção e criar uma animação externa simples para ela no lado direito Vamos fazer com que essa animação termine na quinta segunda. Em seguida, vamos até o ponto em que essa animação começa e criar uma animação externa para o grande menu à esquerda Podemos mover isso do quadro para o lado esquerdo. Ótimo. E agora vamos criar uma animação externa para o cabeçalho Antes de fazer isso, notei que o cabeçalho não está bom. Eu adoraria que começasse do lado esquerdo e não fosse cortado como está agora Foi assim que consegui o design da Figma. Mas aqui no After Effects, vou alterá-lo para caber na minha animação. No seu caso, você não o vê porque está usando meus arquivos finalizados do Illustrator Então, você já corrigiu esse problema. Para corrigir isso, acessei esse design no Illustrator e ajustei a forma para o lado esquerdo Depois de terminar, salvei o projeto para poder obter a versão atualizada e o After Effects. Por fim, atualizei a posição da camada que estava bagunçada por causa da alteração de design que fiz no Illustrator. Tudo bem E agora, depois de corrigir isso, depois de verificar a aparência da próxima tela, entendi que a seção do cabeçalho não está mudando, então não preciso criar uma animação tro para ela. Portanto, agora, antes de inserir as próximas camadas, vamos garantir que essas camadas sejam visíveis somente dentro dos limites da caixa cinza principal dessa tela. Acho que ficará melhor em vez simplesmente deixar as camadas como estão agora. Vamos começar a lidar com o menu primeiro. Precisamos fazer essa camada, usar o Alfa da caixa cinza. Então arraste o botão de seleção da função Track Mat da do menu até a camada da caixa cinza, que é a última camada em nosso painel de camadas Por fim, ative essa camada novamente. Incrível. Agora, vamos fazer o mesmo com a caixa branca da seção principal. Ótimo. E agora vamos repetir esse processo. Para o resto das camadas, queremos ser mascarados. Por alguma razão, quando tentei fazer esse processo para várias camadas, de uma só vez, não funcionou. Então, se isso acontecer com você, não se preocupe. Apenas certifique-se de fazer isso um por um. Como você pode ver agora, isso está funcionando. Também podemos fazer isso em duas camadas ao mesmo tempo. Tudo bem Quando terminarmos com isso, vamos voltar à cena e ver como fica. Como você pode ver, como temos uma animação de algumas camadas subindo, não as vemos porque agora elas estão mascaradas pela camada principal de fundo cinza Quando você está na situação, tudo o que você precisa fazer é entrar na pré-composição com as camadas mascaradas e encontrar o momento em que a animação inicial terminou completamente Podemos ficar neste momento, que é onde a animação externa está começando, e a partir desse ponto, podemos selecionar todas as camadas não queremos que sejam mascaradas na parte anterior da animação e dividi-las Agora podemos colocar a camada duplicada aqui. Finalmente, precisamos selecionar as camadas que não precisamos, mascarar e desativar a função track Mat para elas Então, agora temos essas caixas de projeto não mascaradas por nenhuma camada no momento em que elas estão aparecendo E então nós os mascaramos para a parte de animação externa É assim que você lida com esse tipo de situação. Tudo bem E agora podemos entrar na próxima tela e tentar entender quais camadas e objetos devem ser apresentados após a animação do clique. Precisamos ter certeza de inserir essas duas seções. Vamos começar com o grande menu no lado esquerdo. Primeiro, precisamos copiá-lo. Em seguida, vamos voltar para a primeira tela do projeto e chegar ao momento em que precisamos que as novas camadas entrem na cena. No nosso caso, é do início da animação Otro. Tudo bem Então, agora vamos colar o menu copiado aqui e colocá-lo acima de todas as camadas Agora podemos fazer com que essa camada comece a partir desse momento. E agora vamos garantir que essa camada esteja mascarada. Podemos colocá-lo abaixo do cabeçalho. Ok, agora use o Alfa da caixa cinza para mascarar essa camada. Ótimo. E agora podemos começar a criar uma animação de introdução para esse menu Podemos criar um quadro-chave aqui porque sabemos que essa é a posição em que ele precisa estar após a introdução Agora podemos ir para o início da nossa animação e mover essa camada para a esquerda. Uma vez feito isso, podemos atrasar a animação de introdução da animação externa do menu anterior Tudo bem E agora vamos voltar para a segunda tela de projetos e copiar o resto das camadas. Vamos selecionar essas quatro camadas, copiá-las e colá-las na pré-composição do primeiro projeto Vamos fazer com que eles também comecem a partir desse momento. Esse é o ponto em que a introdução da tela do segundo projeto começará Ótimo. Vamos novamente para a segunda tela e, desta vez, copie a caixa branca. Agora, clique nessa camada e cole a caixa branca para que ela fique acima da selecionada. Feito isso, vamos criar uma animação de introdução para essa nova seção Criaremos uma introdução diferente para o restante das camadas que precisam aparecer na seção Mas podemos animar todas essas camadas juntas. Vamos marcar a caixa branca e adicionar essas quatro camadas a ela. Antes de animá-la, certifique-se de colocar essa seção no lugar certo Como você pode entender, devemos reduzir isso um pouco. Então selecione a camada da caixa branca e abaixe-a um pouco. Tudo bem E agora abra a posição dessa camada. Também podemos abrir a posição do novo menu para ver onde ele termina. Portanto, no final da animação de introdução, criaremos um quadro-chave com o valor da posição atual E, no início, vamos decidir que essa seção entrará na tela pela parte inferior. Você pode conferir como isso fica com a animação externa da seção anterior Acho que está ótimo, e podemos salvar o projeto e seguir em frente. Agora vamos criar uma animação de introdução para o resto das camadas que precisam estar nesta seção Então, vamos selecionar todas as listas de tarefas aqui. De volta à pré-composição do primeiro projeto, certifique-se de selecionar essa camada para que as camadas coladas fiquem acima dela. Ótimo. Agora vamos marcá-los em laranja e trazê-los para começar a partir daqui. Ótimo. Agora vamos ampliar um pouco e reduzi-las para que se ajustem ao design original desta seção. Você pode verificar como isso deve ficar nos segundos projetos, pré-composição Tudo bem. E agora vamos começar a criar uma introdução para todas essas camadas No final da introdução, eles devem ser colocados aqui. E no começo, vamos derrubá-los. Podemos colocá-los em algum lugar por aqui. E agora, para tornar isso um pouco mais interessante, vamos fazê-los começar na segunda marca de cinco. Quero criar um pequeno atraso para essas camadas em relação ao resto das seções. Tudo bem, por enquanto, parece tudo bem. Vamos seguir em frente. Neste momento, não me importo que a parte inferior da caixa branca esteja fora da tela. Adoro a aparência, mas quero mascarar as camadas das tarefas para que elas fiquem visíveis somente dentro dos limites da caixa branca. Para isso, primeiro, certifique-se de saber qual é a camada da caixa branca. É esse. Agora precisamos selecionar as camadas da tarefa e fazê-las usar o canal Alfa da camada da caixa branca. Por fim, não se esqueça de ativar novamente a camada da caixa branca. Faça isso para o resto das camadas de tarefas. Tudo bem Feito isso, pode ser uma boa ideia voltar à composição principal e ver se está tudo bem Como você pode ver, estamos tendo uma coisa muito estranha acontecendo Então, vamos voltar à pré-composição de nossos projetos e corrigir isso. Como toda essa cena está em três espaços D, precisamos ter certeza de que todas as novas camadas dentro dessa pré-composição também sejam três camadas D. Então, agora, quando verificarmos a cena principal ou vermos essa parte da animação na composição principal, tudo ficará ótimo Então, agora é um bom momento para salvar todo o progresso e assistir à animação com a narração para ver se o momento está certo Seu gato poderia fazer isso. Com um ponto, você tem uma visão geral clara de tudo o que sua equipe está trabalhando em todos os seus projetos, todas as suas tarefas, tudo em um só lugar. Precisa das perguntas completas, tudo em um só lugar. Tudo bem. Agora eu entendo que, neste momento, toda essa animação de fluxo de demonstração deve terminar na segunda marca de 27. Isso significa que tenho alguns segundos para criar o resto da animação desse fluxo de demonstração. Agora, vamos entrar em cena antes da competição. Nessa linha do tempo, o fluxo da animação de demonstração deve terminar na segunda marca de 16 Dizendo isso, você entende que os códigos de tempo podem ser diferentes em cada pré-composição, e isso porque a pré-composição em que estamos trabalhando na linha do tempo começa no segundo 11 na E dentro dessa pré-composição, começamos a animar a partir da segunda marca zero Portanto, vemos um código de tempo diferente aqui. Nosso ponto final na linha do tempo dessa pré-competição é a marca de 16 segundos, não a marca de 27 segundos, como na competição anterior, onde a cena da pré-competição está localizada e começa a partir dos Então, quando entrarmos na pré-composição do projeto, o código de tempo de finalização será diferente novamente Aqui está na segunda marca dos nove. Isso porque a animação aqui começa na segunda marca zero, e não na segunda marca sete, já que a pré-composição do projeto começa na pré-composição da cena quatro Portanto, não pense que você está cometendo um erro. Na composição principal, o tempo mostra algo diferente de dentro da pré-composição da cena, confie na posição do indicador de É por isso que é importante colocar o indicador de tempo no momento correto na composição principal e depois não movê-lo ao entrar nas pré-composições É muito importante entender isso, especialmente nesses tipos de projetos, pois a criação de animações de fluxo de demonstração pode ser estruturada a partir mais de uma pré-composição que não começa no mesmo momento Tudo bem, de volta ao projeto. Agora vamos diminuir o zoom e, embora tenha em mente que a animação deve terminar na segunda marca de nove pontos nesta linha do tempo, vamos começar a trabalhar na próxima parte da animação desse fluxo de demonstração Desta vez, vamos parar no momento em que a introdução das camadas de tarefas termina e trazer o camadas de tarefas termina e trazer ícone verde da caixa de seleção para que possamos começar a criar a animação da caixa de seleção Como você pode ver, temos duas camadas criando o design da caixa de seleção Portanto, certifique-se de selecionar os dois e colá-los na primeira pré-composição do projeto Vamos agora começar a partir daqui e colorir de verde. E agora precisamos cronometrar a animação de introdução da caixa de seleção junto com as camadas Podemos iniciar a animação da caixa de seleção logo após a introdução das camadas da tarefa Então, vamos ficar aqui por enquanto. E agora, como sei que precisarei ter algumas caixas de seleção na cena, prefiro pré-compor essas duas camadas e criar a animação interna, para que eu possa facilmente duplicar a pré-composição e distribuí-la por toda a parte da e distribuí-la Podemos chamar isso de tarefa concluída ou caixa de seleção. Vamos apenas tirar a nova pré-composição da pasta da tela Ela aparece aqui porque quando criamos essa pré-composição, uma das pré-composições dentro dessa Tudo bem E agora vamos marcá-lo em verde e inseri-lo. E agora, antes de começarmos a animar, vamos ajustar o código da hora de início da pré-composição para começar Não está em zero porque quando pré-compusemos as camadas, estávamos na segunda marca de cinco. Tudo bem E agora, como os ícones são muito pequenos, vamos escalar essas camadas. Podemos definir a escala para 300, ótimo. E agora vamos colocá-lo no centro da composição. Podemos usar a ferramenta de alinhamento, certifique-se de definir o alinhamento à composição. Acho que podemos definir a escala para 500. Isso é melhor. Finalmente, vamos reduzir as camadas. Incrível. E agora, antes de animá-lo, vamos converter as camadas em três camadas D. Como sabemos que eles precisam ser apresentados em uma cena em três D, então vamos ajustar o tamanho da composição para caber nas camadas da composição, deixe um pouco de espaço livre para que possamos criar uma boa animação pop-up deixe um pouco de espaço livre para que possamos criar uma boa animação pop-up Tudo bem E agora vamos ao início da linha do tempo e criar uma animação pop-up com duração de dez quadros para as duas camadas Acho que podemos aumentar a escala no meio da animação. Parece melhor. Agora podemos atrasar o ícone V três quadros para torná-lo um pouco mais interessante. Eu acho que é demais. Vamos trazer uma moldura para trás Vamos ver como isso parece agora. Ótimo. Eu acho que parece incrível. E agora podemos voltar à cena e cronometrar essa animação com o resto da cena. Primeiro, podemos reduzir a pré-composição e convertê-la em uma camada de três D. Agora, vamos chegar ao ponto em que a animação terminou e ajustar o tamanho da pré-composição para caber na caixa de seleção da tarefa Podemos definir a escala para 30. E agora vamos movê-lo para o lugar certo. Vamos pressionar Cutrel ou Command Shift H para ocultar as guias das camadas para que possamos ver o que estamos fazendo Ótimo. E agora vamos cronometrar essa animação com a cena. Podemos começar a animação da caixa de seleção aqui. Ótimo. E agora vamos salvar o projeto antes de prosseguir. Agora podemos fechar todos os precoms não relevantes e começar a ajustar o movimento em cada parte da animação dessa animação de fluxo de demonstração Como você pode notar, até agora, não facilitamos nenhum dos quadros-chave Ao trabalhar em cenas longas que incluem algumas partes de animação, é melhor se concentrar primeiro em criar a animação inicial e garantir que o tempo seja bom, em vez finalizar cada quadro-chave que criamos para as camadas na Lembre-se desse método quando estiver trabalhando no After Effects. Agora, vamos voltar à cena principal e começar a ajustar todos os quadros-chave que criamos lá primeiro Certifique-se de que nenhuma camada esteja selecionada e pressione você para ver todos os quadros-chave que temos aqui Agora, vamos começar a trabalhar na primeira parte da animação, que é quando a animação dividida começa. Vamos primeiro lidar com o movimento principal que acontece aqui, que é a rotação do nulo que gira todas as telas Vamos nos certificar de ajustar a velocidade dos quadros-chave de rotação para 75% No editor gráfico , fica assim. Agora vamos assistir à animação algumas vezes e ver como é. Acho que podemos aumentar a velocidade 85% para obter um movimento um pouco mais rápido. Tudo bem, acho que parece melhor. Agora, vamos lidar com o movimento descendente. Quero que essa camada comece a subir rapidamente e diminua até o final. Como você pode ver, isso cria uma colisão da tela do projeto com a tela atrás dela Então, vamos selecionar o primeiro movimento da tela do projeto antes da composição e garantir que ele comece devagar e ganhe velocidade no final, o oposto do movimento descendente do nulo Isso criará uma melhor sincronização de velocidade entre as duas animações Agora podemos fazer a tela do projeto se mover mais rápido no meio da animação, se quisermos, ajustando a velocidade de saída Enquanto faço isso, verifico o tempo para que as composições não colidam Ótimo. Então eu vejo isso ajustando a velocidade dessa forma. Pode caber na animação. Então, neste ponto, podemos realmente selecionar todos os quadros-chave da tela do projeto facilitar todos eles e , em seguida, criar a mesma velocidade para toda a animação Antes de prosseguir, vamos verificar se não temos essa colisão acontecendo Tudo bem, acho que tudo parece ótimo. E agora podemos passar a lidar com a próxima parte da animação, que é a animação do resto das telas. Primeiro, vamos selecionar todos os quadros-chave, aliviá-los e, em seguida, no editor gráfico, garantir uma velocidade semelhante à que criamos para a animação nula, que, no nosso caso, a porcentagem de influência deve estar em torno de 85% para a velocidade de entrada e saída Vamos ver como tudo fica junto. O movimento descendente parece um pouco estranho, na minha opinião Então, vamos ajustar a velocidade dessa animação da mesma forma que fizemos com o resto da animação Adoro a sensação do movimento no momento, mas, como você pode ver, temos o problema de colisão mais uma vez. Então, nesse caso, podemos ficar aqui no meio da animação da pré-composição do projeto e ter certeza de mover a camada em seu eixo de posição Z. Meu objetivo é afastar essa camada um pouco mais da camada por trás dela. Também podemos falar um pouco sobre isso. E agora vamos ampliar e verificar se essa colisão está acontecendo novamente. Tudo bem Vejo que tudo parece bem e agora estamos prontos para seguir em frente. Neste ponto, vamos entrar tela de pré-composição do projeto e abrir todos os quadros-chave em todas as camadas para ver o que podemos ajustar Portanto, nesse caso, já lidamos com a animação das caixas do projeto, mas podemos excluir os quadros-chave anteriores na segunda parte das camadas das caixas de tarefas Tudo bem E agora vamos ir e voltar na linha do tempo para ver se tudo ainda está bem depois de excluir esses Não devemos ter problemas, mas ainda vale a pena conferir. Tudo bem E agora vamos lidar com os quadros-chave que ainda não ajustamos. Podemos começar facilitando os quadros-chave dessa camada. Para ver quais camadas estamos selecionando, vamos trazer de volta as guias de camada usando Tudo bem E agora vamos facilitar esses quadros-chave e depois definir a velocidade para 85% Parece bom, mas acho que a animação externa desta seção está acontecendo muito rápido. Então, vamos fazer com que dure um pouco mais para tornar a animação mais lenta No nosso caso, podemos ficar nos segundos cinco e cinco quadros e trazer o último quadro-chave O movimento ainda parece super rápido, na minha opinião. Então, vamos fazer essa animação durar exatamente 1 segundo. Então, se a animação começar em 4 segundos e 22 quadros, vamos para 5 segundos e 22 quadros e traga o último quadro-chave aqui Vamos ver como isso parece agora. Eu mal consigo ver alguma coisa porque as outras camadas já estão entrando em cena. Nesse caso, vamos isolar somente a camada da caixa branca para focar em seu movimento Tudo bem. Acho que parece muito melhor agora. Feito isso, vamos ajustar a duração da animação de introdução para todas as camadas que devem entrar na cena após a primeira parte da animação Como fizemos a animação externa da seção anterior durar 1 segundo, isso significa que também precisamos fazer com que a animação de introdução da nova seção dure 1 Então, vamos ficar, novamente, nos segundos cinco e 22 quadros e trazer o último quadro-chave dessa camada aqui Em seguida, precisamos fazer o mesmo o resto das animações. Para essas duas camadas, ambas começam nos segundos quatro e 25 quadros, que significa que precisamos ir para segundos cinco e 25 quadros e mover os últimos quadros-chave aqui Vamos também fazer com que a introdução da lista de tarefas dure por 1 segundo E, claro, não vamos esquecer de iniciar a animação da caixa de seleção a partir daqui também Ótimo. Feito isso, vamos começar a facilitar os quadros-chave Começando com os quadros-chave de posição para essas três camadas, defina a velocidade para 85% Isso parece bom. Agora, vamos fazer o mesmo com as camadas de tarefas. Perfeito. Como sabemos que toda essa parte da animação deve terminar por volta do nono segundo, podemos ver que temos tempo de sobra para chegar a esse ponto. Então, vamos fazer um bom deslocamento entre as camadas da tarefa para preencher o espaço livre Não adicione muito atraso entre as camadas porque ainda precisamos de alguns segundos para a animação da caixa de seleção verde Com isso dito, vamos iniciar essa pré-composição assim que a última camada de tarefa terminar Ok, agora vamos duplicar essa pré-composição e colocar a nova caixa de seleção abaixo da Para torná-lo mais interessante, vamos começar este no sétimo segundo. Tudo bem Depois de ajustar os quadros-chave, vamos voltar à composição principal e visualizar a animação com a narração para garantir que tudo vamos voltar à composição principal e visualizar a animação com a narração para garantir que funcione perfeitamente. At poderia fazer isso. Com um ponto, você tem uma visão geral clara de tudo em que sua equipe está trabalhando. Todos os seus projetos, todas as suas tarefas. Todos. Com um ponto, você tem uma visão geral clara de tudo em que sua equipe está trabalhando, todos os seus projetos, de todas as suas tarefas, tudo em um só lugar. Preciso da imagem completa. Vejo que a próxima cena deve começar aqui. Então, para evitar um quadro estático, vamos voltar à cena e adicionar outra animação de caixa de seleção verde para a terceira tarefa, apenas para preencher o espaço vazio Verifique se ele tem o mesmo atraso da segunda caixa de seleção. Ótimo. Agora que terminamos de criar a parte mais complexa, que é a animação do fluxo de demonstração, podemos voltar à cena e adicionar alguns movimentos de câmera interessantes para combinar com a animação do fluxo de demonstração. Mas em vez de animar a câmera em si, vamos animar a pré-composição da tela do projeto porque não quero interferir na animação da E também quero mostrar uma maneira mais fácil de criar movimentos semelhantes aos de uma câmera sem realmente animar a câmera Com isso dito, vamos começar. Primeiro, como a pré-composição já tem quadros-chave, criaremos um novo objeto nulo e adicionaremos a pré-composição a ele Dessa forma, teremos uma camada limpa com a qual trabalhar. Então, crie um novo objeto nulo e coloque-o abaixo da camada da câmera Vamos começar esse nulo na marca de 12 segundos e renomeá-lo para tela nula dois Mova-se. Uma vez que controlará o movimento da pré-composição, nomeou a cena dois projetos Agora, converta o nulo uma camada de três D e coloque-o na mesma posição da pré-composição da tela do projeto Você pode copiar os valores da pré-composição para o nulo. Se você mudar para a Visualização Personalizada, verá que o nulo é colocado exatamente onde está a pré-composição Perfeito. Agora podemos associar a pré-composição ao nulo Antes de fazer isso, vamos mover essas duas camadas até aqui e fechar a camada da câmera. Ótimo. Agora, transforme a segunda parte da pré-composição do projeto em nulo Feito isso, agora podemos controlar essa pré-composição usando o nulo sem interferir nos quadros-chave que já estão na já estão Tudo bem Vamos criar um ângulo interessante. Primeiro, crie um quadro-chave para a rotação X nos segundos 12 e 22 quadros Em seguida, avance 1 segundo e gire a pré-composição para cerca de Em seguida, volte ao início dessa animação. Pressione P para revelar a propriedade da posição e criar um quadro-chave com o valor atual Avance 1 segundo e aproxime o nulo da câmera Feito isso, alivie facilmente os quadros-chave e ajuste a velocidade no editor gráfico para cerca de 85% para movimentos de entrada e saída Ótimo. Agora, vamos ver como isso parece. Eu acho que parece ótimo, mas na minha opinião, devemos começar esta moção um pouco mais cedo. Digamos que a partir dos segundos 12 e dez quadros. Vamos abrir os quadros-chave da pré-composição e cronometrar a animação nula para começar do meio da meio da Tudo bem, acho que estamos bem agora. Mas, como você deve ter notado, podemos ver a próxima seção na parte inferior. Vamos entrar na pré-composição e corrigir isso. Primeiro, abra os quadros-chave da caixa branca principal e fique no primeiro quadro-chave Só então abaixe um pouco mais a camada. Agora, volte para a cena e verifique. Isso parece melhor. Acho que também podemos atrasar pouco a animação das caixas de seleção Posteriormente, adicionaremos uma animação com cursor a essa cena. E eu gostaria de ter alguns quadros livres para criar uma animação de introdução para o cursor ou possivelmente uma animação de zoom na tarefa com a caixa de seleção Com isso dito, vamos entrar na pré-composição e mover as três pré-composições da caixa de seleção para começar a partir dos segundos Perfeito. Agora, vamos voltar à cena e, nesse exato momento, aproximar ainda mais o nulo da câmera para que possamos ver as três primeiras tarefas de perto Também podemos brincar com a rotação para obter um ângulo mais interessante. Só não se esqueça do texto acima. Tente não colocar a tela da interface do usuário muito nessa área. Ótimo. Agora vamos ajustar a velocidade para cerca de 85% para essa animação também Ao fazer isso, certifique-se de ajustar as duas propriedades. Nesse caso, sinto falta da rotação. Então, vou facilitar os quadros-chave novamente para redefinir a atenuação e depois ajustá-la adequadamente Feito isso, vamos ver o que temos. Uh, parece ótimo. Para adicionar um movimento suave à cena, podemos ficar um pouco depois da cena, devemos terminar e aproximar a câmera um pouco mais da tela da interface do usuário. Esse é um ótimo exemplo de por que é melhor usar um objeto nulo para ângulos complexos em vez de lidar diretamente com a câmera Você sempre pode manter a câmera para movimentos mais simples. Acho que podemos aproximá-lo ainda mais. Vamos assistir novamente. Tudo bem, eu acho que está ótimo. Agora vamos voltar à composição principal e visualizá-la com a narração Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas pedem, muitas. Antes que você perceba, você está ganhando dinheiro procurando um ponto no Met Ponto. A plataforma que torna o gerenciamento de projetos tão simples que até mesmo seu gato poderia fazer isso. Com um ponto, você ganha um Crist Yes. Tudo projeta. Todas as suas tarefas em um só lugar. A imagem completa? Perfeito. Parece que tudo está sincronizado. Então, vamos encontrar o momento certo para começar a animação externa de toda a cena Pela narração, parece que isso deve começar por volta do segundo 27. Vamos ficar aqui, depois entrar em cena, e eu mostrarei como criar uma animação externa simples que transita perfeitamente para a próxima cena com um corte de fósforo Primeiro, precisamos ajustar o último quadro-chave da câmera para que ele termine aqui Agora, avance 1 segundo e empurre a câmera para trás. Vamos escalar o painel por conveniência. Agora, vá para o início do Outro e abra também os quadros-chave nulos Crie quadros-chave com os valores atuais para ambas as propriedades, pois não queremos que eles mudem até agora. Em seguida, avance 1 segundo e ajuste o nulo para que a tela da interface se alinhe bem ao centro Podemos empurrar a câmera ainda mais para trás e levantá-la um pouco. Ótimo. Estamos quase lá. Desde que movemos a câmera para trás. Agora podemos ver algumas das camadas de animação anteriores. Para corrigir isso, tudo o que precisamos fazer é encontrar o ponto na linha do tempo em que temos 100% de certeza de que essas camadas não são mais necessárias Nesse caso, é quando nosso primeiro nulo termina sua animação Também podemos cortar esse nulo até o final de sua animação. Esse é o local perfeito para recortar o resto das telas que foram criadas com esse valor nulo Então, selecione todos eles e pressione Alt no colchete direito para cortar. Incrível. Feito isso, vamos voltar à nossa animação externa Neste ponto, podemos começar a ajustar o movimento. Primeiro, selecione o objeto nulo e pressione U para garantir que não perdemos nenhum quadro-chave Ótimo. Agora, selecione todos os quadros-chave e pressione F nove ou F e F nove se você estiver em um Mac Em seguida, abra o editor de gráfico de velocidade e ajuste a velocidade para mais perto de 95% Estamos fazendo isso porque queremos criar essa transição de match cut. E para que funcione, o movimento precisa atingir um pico muito rápido. Agora, fique no ponto do gráfico em que o movimento é mais rápido. Em seguida, volte para a composição principal e corte a pré-composição até esse ponto Dessa forma, na próxima cena que criaremos , continuaremos o movimento sem problemas Mais sobre isso na próxima lição. Por enquanto, vamos voltar à cena e ajustar sua duração. Não o corte muito perto do final do movimento externo. Em vez disso, avance 1 segundo e corte a linha do tempo até esse ponto Ótimo. Feito isso, entre na tela antes da composição. Só para verificar, não perdemos nada. Tudo parece bem aqui, e não precisamos reduzir esse cronograma Então, vamos seguir em frente. Agora podemos limpar um pouco as coisas, fechar os precoms desnecessários depois voltar para a composição principal para nos prepararmos para animar Antes de concluirmos, vamos também organizar o projeto movendo a tarefa pré-comp feita para a pasta precomp Faça o mesmo com o precomp Cat Jeff. Feito isso, salve o projeto. E com isso, terminamos esta lição. E na próxima, concluiremos transição do match cut e começaremos a criar a próxima animação de fluxo de demonstração. Vai ser uma boa. Então nos vemos lá. 18. Como criar o modelo de animação do título: Volte. Vamos começar a aula acessando a placa de vídeo e verificando qual é a próxima coisa que precisamos fazer Como você pode ver, agora precisamos criar a animação do título. Essa animação do título aparecerá sempre nas próximas cenas do projeto com um texto diferente. Como você pode ver, nós também o temos aqui. Todas as perguntas do roteiro serão apresentadas de forma semelhante. Na última parte, essa animação do título será como nossa primeira animação do título na abertura deste vídeo. Tudo bem, agora que sabemos que teremos algumas animações do mesmo título, podemos estruturá-las de uma forma, para que seja fácil duplicá-las e apenas alterar Com isso em mente, vamos criar uma nova composição para a primeira animação do título. Vamos chamá-lo de Título Principal um. Certifique-se de alterar a resolução para full HD e verifique se as demais configurações estão corretas. Ótimo. Então, agora vamos selecionar a ferramenta de texto e ir até o script para copiar o texto para a primeira animação do título. No nosso caso, é essa pergunta. De volta ao projeto. Vamos colar o texto e ajustá-lo. Primeiro, certifique-se de centralizar o parágrafo. E agora vamos ver qual tamanho pode funcionar bem aqui. Eu acho que 150 é ótimo. Em seguida, escolha o peso em negrito para a fonte e, em seguida, vamos alinhar a camada ao centro do com Finalmente, podemos centralizar o ponto de ancoragem. Para isso, segure o comando do controlador e clique duas vezes na ferramenta AnchorPoint Ótimo. E agora vamos voltar para a ferramenta de seleção e tornar essa composição um pouco mais interessante. Primeiro, podemos trazer a animação de fundo em gradiente que criamos no início do projeto E agora eu quero mostrar alguns truques básicos que você pode fazer para que o gradiente pareça um pouco diferente do resto das cenas deste projeto Pode ser uma boa ideia porque podemos decidir que o plano de fundo das animações do título será um pouco diferente do resto do projeto para torná-lo um pouco mais interessante Certo. Então, o primeiro truque que adoro fazer quando tenho animações em gradiente é adicionar o efeito invertido Agora, posso mudar os canais aqui para obter algumas variações interessantes do gradiente. Tudo bem. Por enquanto, digamos que optemos pela luminância. Se aumentarmos o zoom, podemos ver os pixels que fazem o gradiente parecer de baixa qualidade Para corrigir isso, podemos adicionar o efeito Fast booxplur. Em seguida, certifique-se de definir o raio de desfoque para um número alto Acho que 20 é o suficiente no nosso caso. Em seguida, para melhorar a aparência, também podemos adicionar o efeito de matiz e saturação e aumentar a saturação principal para um número maior para obter uma aparência interessante para o obter uma aparência interessante Como você pode ver, ele cria boas partes de contraste no gradiente. E agora, se você quiser alterar a cor do gradiente, pode brincar com a propriedade master hue Mas se você quiser ter controle total das novas cores, pode adicionar o efeito de toner Agora vamos excluir o efeito invertido possamos ver o que podemos fazer com o efeito de toner com nossas cores originais. Tudo bem. Então, primeiro, para controlar mais tons em nosso gradiente, podemos mudar os tons para Penton Agora temos cinco tipos de cores que podemos controlar. Agora podemos trazer a paleta de cores para a composição e começar a ajustar os diferentes tons que temos Digamos que eu queira que esse gradiente pareça mais roxo, então vou começar a escolher as cores roxas Estou mostrando esses truques porque quero que você saiba que pode ter controle total das cores do seu fundo gradiente, seja renderizando-o sozinho ou baixando alguma animação em gradiente da Internet Às vezes, adoramos o movimento do gradiente, mas não os temos nas cores precisas que precisam se adequar à paleta de nossos clientes Agora você sabe como ajustar qualquer gradiente para atender às necessidades do seu projeto. Tudo bem. Então, com isso explicado, vamos excluir o efeito do toner e continuar ajustando nosso fundo gradiente um Se você ainda conseguir ver os pixels, poderá dimensionar o raio de desfoque E saiba também que a ordem dos efeitos também pode afetar a aparência do gradiente. Como você pode ver, ter o efeito de desfoque sob o efeito de matiz faz com que o gradiente pareça um pouco melhor Ok, agora que estivermos bem com a aparência da composição do título, podemos começar a animá-la Existem inúmeras maneiras de fazer isso, mas eu quero mostrar como você pode fazer com que seu projeto tenha uma boa aparência, mesmo com uma animação muito simples. Primeiro, vamos abrir a escala para ambas as camadas. Agora vamos definir a escala para 200. Podemos definir a camada de texto para 400 para obter um movimento um pouco mais interessante. Agora, crie um quadro-chave no início da linha do tempo. Em seguida, vamos avançar 1 segundo e trazer a escala de volta para 100 para ambos. O texto parece muito grande. Vamos definir a escala para 90. Em seguida, vamos facilitar os quadros-chave e definir a velocidade de ambos em cerca de 95% O objetivo é criar um movimento super rápido. Vamos ver como isso parece. Tudo bem. Isso parece bom por enquanto. Então, agora criamos a introdução para o título Vamos agora criar o Outro. Mas antes disso, vamos até a placa de vídeo e verificamos quanto tempo essa animação deve durar Começa nos segundos 27 e 15 quadros, e agora vamos ver onde termina nos segundos 29 e dez quadros. Isso significa que temos pouco mais de 2 segundos para essa animação. Então, agora, de volta à competição pelo título. Vamos criar uma pequena pausa para a animação para que o espectador possa ler o texto Vamos fazer a pausa durar dez quadros. Então, agora vamos criar um quadro-chave com os mesmos valores aqui. Então, vamos avançar 1 segundo e copiar os primeiros quadros-chave aqui Agora, precisamos ter certeza de que o movimento é semelhante ao da introdução Como você pode ver, não é. Então, vamos facilitar os quadros-chave externos para redefinir a velocidade e depois ajustá-la para 95% Vamos ver como isso parece. Acho que não há tempo suficiente para ler o texto. Vamos fazer a pausa durar por mais cinco quadros. Este será o ponto em que encerraremos a animação para obter uma boa transição de match cut que se encaixe em quase todas as cenas. Tudo bem. E agora vamos adicionar um pequeno detalhe à animação para trazer o foco do espectador para a palavra importante neste texto. No meu caso, quero adicionar uma boa animação de traçado abaixo da palavra. Deixe-me mostrar o que quero dizer. Primeiro, certifique-se de que nenhuma camada esteja selecionada. Em seguida, selecione a ferramenta Caneta. Agora, certifique-se de desativar a cor de preenchimento e ativar a cor do traçado. Para a cor do traçado, vamos trazer a paleta de cores para a composição e decidir usar uma cor brilhante para que ela fique em alto contraste com o fundo para que possamos vê-la claramente Tudo bem. Agora, vamos excluir a paleta de cores e criar uma linha abaixo da palavra cheia para a largura do traçado. Podemos deixá-lo no 20. Agora vamos criar um ponto adicional no caminho e trazê-lo à tona. Em seguida, vamos curvar e ajustar as alças para obter uma boa linha arredondada. Vamos reduzir isso um pouco. Ótimo. Agora vamos mudar o nome para traçado e começar a animá-lo E faremos isso usando o efeito trim path. Por enquanto, vamos ficar na segunda e criar quadros-chave para a propriedade final Se quiser que seu traçado se mova de outra direção, você pode abrir as propriedades do traçado e alterar a direção do caminho. Tudo bem. Vou trazê-lo de volta ao que era. E agora vamos animá-lo. Nesse momento, defina a propriedade final como zero. Agora vamos para o final do momento de pausa e trazer o valor final para 100. Ótimo. E agora vamos ficar cinco quadros após o início da animação e criar um quadro-chave para a propriedade inicial com o valor zero Em seguida, fique cinco quadros após o final da animação e defina o valor inicial como 100. Agora, temos uma boa animação de traçado. Vamos tornar o traçado visível por um pouco mais de tempo, e podemos fazer isso brincando com a velocidade das duas animações Primeiro, vamos selecionar os quadros-chave finais e fazer com que essa animação comece rapidamente Depois disso, vamos fazer com que os quadros-chave iniciais comecem devagar. Dessa forma, ajustamos o tempo entre essas duas animações para tornar o traçado visível por mais alguns quadros antes de desaparecer Ótimo. Agora, depois de concluirmos a animação inicial da animação do título, vamos adicionar um movimento adicional de zoom suave à cena para que ela não pareça estática. Deixe-me mostrar como fazer isso rapidamente. Primeiro, vamos criar uma nova camada de ajuste acima de todas as camadas. Em seguida, vamos adicionar o efeito de transformação a ele. Agora, vamos ao início da linha do tempo e definamos a escala para 120 e criaremos um quadro-chave Agora, vamos a um ponto no tempo em que temos certeza de que a animação já deve terminar. No nosso caso, podemos ficar na marca de três segundos e agora definir a escala para 100. Agora, se você verificar a animação, verá que obtemos um movimento de zoom agradável e suave, movimento de zoom agradável e suave, e a animação parece melhor porque, mesmo no momento da pausa, a cena está se movendo Tudo bem? Então, com isso feito, terminamos de criar a animação do título. Podemos ativar o recurso de qualidade e amostragem para obter o máximo de qualidade para o gradiente MP. Para o arquivo, temos aqui. Vamos agora para a segunda quarta e reduzir a composição até este momento Vamos voltar à composição principal e trazer a pré-composição do título aqui E agora, para obter uma transição interessante de match cut, vamos recortar a pré-composição do título a partir do momento em que a animação de introdução é Para saber onde está, com certeza, podemos entrar na pré-composição e encontrar o momento em que a animação de uma das camadas está em alta velocidade No nosso caso, está aqui no quadro 15. Podemos mover um quadro para trás e depois voltar para a composição principal e cortar a pré-composição até esse momento Agora, se você assistir à animação entre a última cena e o título, verá que temos uma transição super legal de match cut. Ótimo. Então, agora vamos recortar essa pré-contagem do final, também no momento em que o ar livre atinge a velocidade máxima para obter uma transição de corte para a Incrível. Então, com isso feito, agora estamos prontos para começar a trabalhar na próxima cena. Antes de fazer isso, sugiro que você salve o projeto para garantir o progresso que você fez até agora. Tudo bem. E agora vamos voltar para a placa de vídeo e ver qual é a próxima cena que precisamos criar Ok, agora, como você pode ver, precisamos trabalhar na tela principal da interface do usuário da tarefa. Pelo que vemos no storyboard, podemos ver claramente que precisaremos criar uma pequena animação de fluxo de demonstração Estou falando sobre criar uma animação de introdução para o pop-up que vemos aqui Para entender isso melhor, vamos abrir essa pré-composição da tela da interface do usuário e ver o que temos Ok, então aqui podemos ver o pop-up apresentando as subtarefas da tarefa principal, que neste caso, é projetar o novo painel Eu sei disso porque posso ver isso no título desse pop-up. Ótimo. Então, com isso em mente, vamos criar uma nova composição para a nova cena na qual criaremos essa animação de fluxo de demonstração Vamos chamar isso de cena pré-competição de cinco. Verifique se as configurações estão corretas e clique em OK. Ótimo. Então, aqui está a nova cena pré-competição. E agora vamos arrastar a tela da interface de tarefas pré-composição para a linha do tempo da nova composição de cena Posteriormente, adicionaremos aqui o texto e a animação do cursor. Mas, por enquanto, vamos nos concentrar na criação da animação de fluxo de demonstração. A primeira coisa que podemos fazer é selecionar todas as camadas aqui e reduzi-las. Não estou planejando animar a cena em um espaço de três D, então não vou converter as camadas em três camadas D. OK. E agora vamos selecionar todas as camadas relacionadas ao design pop-up e pré-compor Como temos essa camada de sombra, é mais fácil entender quais camadas selecionar, começando por essa e todas as demais camadas acima. Você pode desativar e ativar a camada selecionada para ter certeza de que está correta. Tudo bem. E agora vamos pré-compor todos eles. Podemos chamar essa tela de pré-composição para pop-up. Ótimo. Então, agora vamos reduzir a pré-composição e garantir que o ponto de ancoragem esteja no centro. Incrível. E agora vamos desligar também o pop-up na camada de sombra e começar a preparar o resto do design para animação. Neste ponto, precisamos entender quais camadas devemos pré-compor e E, claro, tudo depende da animação que queremos criar aqui. No nosso caso, o mais importante a saber é que precisamos criar uma animação de clique para essa tarefa, pois o pop-up que temos no design está relacionado a ela Mas antes de fazer isso, vou me certificar de que as caixas de tarefas tenham um preenchimento branco. Esqueci de fazer isso na fase de preparação no Illustrator Mas está tudo bem. Como eu já disse, isso pode acontecer com todos nós. E é importante para mim mostrar a você um fluxo de trabalho realista. No seu caso, você não precisa fazer nada porque você já tem meus arquivos finalizados do Illustrator Então, vou acelerar esse processo um pouco, porque tudo o que estou fazendo é apenas encontrar as camadas relevantes e certificar de definir uma cor de preenchimento como branca. Ótimo. E agora, depois de salvar o arquivo, vou voltar ao projeto e esperar até que ele seja atualizado. Incrível. Então, quando eu tiver tudo atualizado, salvarei o projeto e você poderá continuar acompanhando. Vamos voltar para a placa de vídeo e verificar quantos segundos a cena deve durar Isso nos ajudará a entender onde terminar a cena e quanto tempo a parte da animação deve durar. Portanto, a cena começa nos segundos 29 e 15 quadros e termina nos segundos 38 e 28 quadros. Isso significa que temos pouco mais de 7 segundos para apresentar todas as animações que acontecem aqui Então, com isso em mente, agora podemos reduzir a pré-composição e começar a trabalhar na introdução dessa tela Eu prefiro terminar a introdução primeiro, então eu sei com certeza por onde começar a animação de fluxo de demonstração que precisa vir depois da introdução É melhor do que primeiro criar o fluxo de demonstração e depois ajustar os quadros-chave depois de criar a introdução Ótimo. Portanto, como temos uma animação de zoom rápida acontecendo na parte externa da animação do título, podemos criar uma animação rápida de zoom para a introdução dessa cena para obter uma combinação interessante Transição. Então, vamos criar uma animação em escala para essa pré-composição, a partir de uma escala de 50 E depois de 1 segundo, não defina a escala para 100 porque precisamos de algum espaço para o texto, podemos configurá-la para 80. Ótimo. Com isso em mente, vamos também criar uma animação de posição. Quero que a tela fique aqui embaixo. Podemos usar a grade de ação segura para garantir que não a movamos muito para baixo. Tudo bem? Agora vamos ajustar a velocidade, para que tenhamos esse movimento super rápido no meio da animação Este será o ponto em que começaremos esta pré-composição. Vamos agora para o Master Comp e trazer a nova cena aqui Agora, vamos entrar na cena e ficar no ponto mais rápido. Finalmente, vamos voltar ao Master Comp e recortar essa pré-composição até esse momento E agora tudo o que precisamos fazer é colocar a cena para começar logo após a animação do título e verificar como tudo fica junto. Incrível. Acho que o corte do fósforo funciona perfeitamente. Agora podemos entrar na cena e começar a animar a animação do fluxo de demonstração, começando logo após a introdução Vamos inserir as tarefas pré-composição e começar a trabalhar. Tudo bem, então o que podemos fazer aqui é criar uma boa animação emergente para todas as tarefas na seção principal Então, a partir desse momento, criaremos um quadro-chave para a propriedade de escala com o valor atual, como sempre, para ter tudo organizado Vamos marcar essas camadas com uma cor diferente. Em seguida, vamos passar 1 segundo e criar outro quadro-chave aqui Então, no meio dessa animação, vamos escalar todas elas. 120 parece bom. Ótimo. E agora, antes de ajustar os quadros-chave, vamos primeiro terminar de animar e cronometrar toda a Então, agora, após a animação de abertura, quero adicionar uma animação de caixa de seleção para algumas das primeiras tarefas E como eu tenho uma animação de caixa de seleção pronta em uma pré-composição separada, agora podemos excluir essas camadas Posteriormente, adicionaremos a caixa de seleção pré-composição que preparamos anteriormente Por enquanto, vamos criar a animação de cliques para a terceira tarefa. Mas em vez de animar essa camada, usaremos um objeto nulo E é porque o ponto de ancoragem nessa camada está centralizado, e eu não quero alterá-lo ou mexer com os quadros-chave que eu já tenho e eu não quero alterá-lo ou mexer com os quadros-chave que eu já tenho nessa camada. Deixe-me mostrar o que quero dizer. Então, agora vamos criar um novo objeto nulo e criar uma pequena configuração para a animação de cliques Faça com que o nulo fique na área a partir da qual você deseja que a animação do clique seja acionada Podemos alterar o nome para o nome da camada que será associada a ela No nosso caso, é a camada com o número 100, então podemos chamá-la de nula 100 Uma vez feito isso, vamos transformar a camada relevante no nulo. E agora, a partir do segundo segundo, ou seja, após a animação de abertura, vamos criar uma animação em escala reduzida para o nulo Vamos fazer com que dure 15 quadros. Tudo bem. Agora, depois de obtermos a animação do clique, podemos cortar essa camada para começar e terminar de acordo com os quadros-chave Posteriormente, podemos mover esse nulo para trás ou para frente no tempo, caso desejemos que a animação do clique aconteça em um momento diferente Tudo bem. Então, feito isso, vamos continuar trabalhando na próxima parte da animação, que é a introdução do pop-up da subtarefa Primeiro, após a animação do clique, a camada de sombra deve aparecer. Então, vamos trazê-lo aqui. E agora vamos criar um fade de 1 segundo na animação usando a propriedade de opacidade Se a animação começar nos segundos dois e 15 quadros, ela deverá terminar nos segundos três e 15 quadros. OK. E agora, para tornar isso um pouco mais interessante, vamos também adicionar uma boa animação de desfoque Para isso, primeiro, vamos criar uma nova camada de ajuste. Vamos colocá-la acima da camada de sombra e movê-la para começar de onde a sombra começa. Em seguida, precisamos tornar essa camada de ajuste visível somente dentro dos limites da forma principal dessa tela de interface, pois não queremos que os ativos fora dessa área fiquem desfocados Precisamos que apenas a área da tela fique embaçada. Então, para fazer isso, podemos simplesmente fazer a camada de ajuste, usar o Alfa da caixa principal. Não se esqueça de ativar novamente a camada da caixa dessa forma que mascaramos a camada de ajuste OK. Então, agora vamos adicionar o efeito de desfoque de caixa rápida à camada de ajuste e criar uma animação para o raio de desfoque Se ativarmos o fundo transparente, veremos que o desfoque está cobrindo apenas os limites da tela da interface do usuário, que é o que queremos Isso significa que, caso adicionemos alguns novos ativos atrás da camada de ajuste, isso apenas desfocará as partes atrás dos limites do formato da tela da interface Tudo bem. Vou deletar a forma e vamos animar o desfoque Primeiro, podemos alterar o nome da camada de ajuste para desfoque Agora, vamos definir o raio de desfoque para zero neste momento e criar Em seguida, vamos avançar 1 segundo e ajustar o desfoque para um número maior. Talvez dez. Eu acho que isso é demais. Vamos tentar cinco. Sim, isso é melhor. Ótimo. Então, agora que tivermos feito isso, vamos trazer a pré-composição pop-up aqui e criar uma animação pop-up simples para ela usando a Ótimo. Acho que parece bom, e agora podemos seguir em frente. Após a animação pop-up, precisamos adicionar uma animação de caixa de seleção dentro da pré-composição pop-up Como já temos uma pré-composição animada pronta , podemos fazer isso em um minuto Por enquanto, vamos nos concentrar em melhorar o movimento dos quadros-chave que criamos aqui Mas antes de fazermos isso, acabei de notar que a camada de ajuste não atinge a parte inferior desta seção. Para corrigir esse problema, rapidamente, podemos usar o canal Alpha da caixa principal dessa tela da interface do usuário para mascará-lo. Ótimo. Portanto, agora não vemos a parte inferior da caixa branca desta seção e podemos continuar melhorando o movimento. Primeiro, vamos começar com as camadas de tarefas. Vamos fazer com que eles se destaquem rapidamente desde o início da animação. Percebi que perdi a primeira tarefa, que é a camada inferior aqui no painel de camadas. Deixe-me ajustar o movimento aqui bem rápido. É um bom exemplo para sempre garantir que você esteja obtendo todos os quadros-chave que deseja ajustar Tudo bem. Feito isso, estou feliz com o movimento e, agora, para torná-lo um pouco mais interessante, criarei um deslocamento de um quadro entre os quadros-chave para criar um bom atraso Vamos ver como isso parece. Acho que podemos aumentar o atraso. Digamos que dois quadros se desloquem. Para isso, vou dois quadros após a primeira tarefa, quadros-chave, e depois garantir que a segunda tarefa comece a se mover a partir desse ponto Desta vez, usarei o novo recurso de deslocamento Portanto, vou me certificar de não selecionar os quadros-chave da camada superior Vou selecioná-los na camada inferior porque quero que o deslocamento esteja na direção para a direita Tudo bem. Eu acho que parece ótimo. Agora vamos ajustar a introdução para a próxima parte, acordo com a animação das camadas da tarefa Feito isso, vamos começar a ajustar a próxima parte da animação que temos aqui, começando com a animação de cliques Agora vamos ajustar a animação de sombra e desfoque. Vamos fazer com que comece rapidamente. Agora vamos lidar com a animação pop-up. Podemos definir a velocidade dos quadros-chave da escala para 85% e ver como fica Acho que está ótimo, e podemos passar para a próxima parte da animação, que começa logo após a animação pop-up. Então, vamos ficar aqui e inserir a pré-composição para adicionar a animação da caixa de seleção que precisa Em primeiro lugar, vamos ampliar para que possamos ver o que estamos fazendo melhor. E agora, em vez de animar cada uma das caixas de seleção aqui, usaremos nossa animação pronta que preparamos anteriormente Então, vamos encontrá-lo na pasta precomps e arrastá-lo para a linha do tempo Agora vamos reduzir a pré-composição e reduzi-la. Podemos definir a escala para 20. Agora, vamos colocar essa pré-composição ao lado da quarta subtarefa. Acho que podemos ampliá-lo um pouco. Vamos ver como isso parece. Vamos definir a escala para 25. Ótimo. Então, agora vamos encontrar o momento certo para que essa animação comece. Isso precisa acontecer logo após a animação pop-up. Então, vamos ficar aqui e entrar na pré-composição pop-up. Agora, mova a animação da caixa de seleção para começar daqui. Incrível. E agora vamos duplicá-lo e começar os novos 115 quadros depois Agora podemos marcar as pré-composições em verde e finalmente trazer a nova para a sexta subtarefa. Não acho que precisemos criar mais do que isso, pois já quase atingimos o limite de duração necessário para isso. Com isso em mente, vamos até o master comp e ver a animação enquanto ouvimos a narração para verificar se tudo está sincronizado perfeitamente antes de criar um Otro Claro. Cada projeto inclui tarefas detalhadas, subtarefas e acompanhamento do progresso em tempo real, para que nada passe despercebido Quero ver quem? Tudo bem, acho que está ótimo. E agora podemos começar a pensar no final dessa cena, que precisa acontecer por volta dos 37 segundos. Quando voltamos à cena, podemos ver que ainda temos muito tempo até chegar a esse ponto. No momento, a animação que criamos parece um pouco chata. Então, vamos usar essa oportunidade para adicionar alguns bons movimentos de zoom in e zoom out para tornar a cena mais dinâmica. Também quero mudar a animação que criamos para as caixas de tarefas um pouco mais tarde na linha do tempo, já que temos muito espaço livre até a cena terminar Tudo bem. Então, com isso dito, vamos ficar na marca de dois segundos na linha do tempo da cena e trazer a animação emergente das camadas de tarefas para começar a partir daqui camadas de tarefas para começar a partir Vejo que perdi a criação um atraso entre a primeira e as duas camadas inferiores, então vou mover os quadros-chave da camada inferior , um quadro para frente Tudo bem. Agora vamos selecionar todos os quadros-chave das camadas de tarefas e iniciar essa parte da animação a partir da marca de dois segundos Ótimo. E agora vamos selecionar a próxima parte da animação e ajustar o tempo de acordo. Pensando bem, vamos começar essa parte da animação 1 segundo depois, porque eu quero deixar algum espaço livre para uma animação de zoom ou uma animação com cursor neste momento. Depois de terminar, vamos voltar à cena, ficar na segunda e começar a ajustar as propriedades de escala e posição até obtermos algo que pareça bom Meu objetivo aqui é criar uma boa animação de zoom em que a seção da lista de tarefas apareça mais próxima. O foco do espectador deve estar nessa área neste momento. Estou apenas experimentando valores diferentes de escala e reposicionando a pré-composição, para lista de tarefas fique mais no Podemos ativar a grade de segurança de ação para garantir que tenhamos uma composição equilibrada. Acho que parece bom, mas a posição inicial da pré-composição pode ser ajustada um pouco Vamos movê-lo um pouco para cima para criar uma diferença maior entre a primeira e a segunda posição Não se preocupe com o texto que deveria estar na área superior. Em vez disso, podemos colocar esse texto na parte inferior. Agora, vamos ficar no segundo quadro-chave e ajustar o tamanho e a posição da pré-composição novamente para tornar o zoom na animação Também vamos garantir que a seção da lista de tarefas esteja perfeitamente alinhada ao centro Use as guias de grade seguras para verificar o alinhamento. Nesse ponto da linha do tempo, as caixas de tarefas devem estar centralizadas exatamente de acordo com as guias Um lembrete rápido: esse deve ser seu fluxo de trabalho principal quando você trabalha nesses tipos de projetos Primeiro, crie a animação essencial e depois melhore o movimento. Depois disso, verifique a sincronização da animação com a narração. E, finalmente, adicione movimentos no estilo da câmera na cena para torná-la mais interessante. Tudo bem, agora vamos voltar para a composição principal e encontrar uma cena com uma camada de texto dentro para que possamos copiá-la e reutilizá-la Cole a camada de texto na linha do tempo e traga-a do início da animação Coloque essa camada abaixo da tela da interface do usuário em algum lugar por aqui. Por fim, vamos até o roteiro e copiemos o texto que precisa aparecer nessa cena. Copiaremos primeiro a primeira parte da frase. Vamos agora encontrar o lugar perfeito para o texto. Ótimo. Agora, vamos criar um bom ângulo para a tela da interface do usuário durante a parte em que o painel pop-up da interface aparece. Podemos começar a mudar o ângulo a partir do momento em que a animação da lista de tarefas termina e ver como fica Primeiro, crie quadros-chave para propriedades, escala e posição com seus valores atuais, porque não queremos que a tela da interface do usuário se mova antes desse ponto Isso nos dá um momento de pausa. Vamos encurtar essa pausa, por exemplo, coloque os quadros-chave na marca de quatro segundos Feito isso, vamos decidir onde a mudança de ângulo deve terminar. Ele pode terminar pouco antes da animação do clique. Então, vamos até esse ponto de tempo e ajustar os quadros-chave de escala e posição da pré-composição Posicione-o de forma que ainda tenhamos algum espaço para adicionar a segunda parte do texto depois Agora podemos dividir a camada de texto neste momento e copiar a segunda parte do texto do script. De volta ao projeto, vamos colar o texto na nova camada de texto e movê-lo para cima Ótimo. Agora vamos expandir essa camada e encontrar um bom momento para criar outra animação de ângulo variável. Desta vez, criaremos uma animação de zoom na área da subtarefa dentro do painel pop-up da interface Para fazer isso, continuaremos a encenar em sincronia com a animação que acontece dentro da pré-composição da tela da interface do usuário Até esse momento, podemos fazer uma pausa na cena. Então, vamos criar quadros-chave com os valores atuais para ambas as propriedades Em seguida, avance 1 segundo e crie uma animação de zoom ajustando as propriedades de escala e posição Tudo bem. Eu acho que parece bom. Agora podemos melhorar o movimento todos os quadros-chave que temos aqui Faremos isso usando o painel de velocidade dos quadros-chave. Um lembrete rápido Você não pode ajustar propriedades diferentes usando o painel de velocidade Então, primeiro, faça isso para a propriedade de posição e, em seguida, repita o processo para a propriedade de escala. Vamos definir ambos para 85% da velocidade. Vamos ver o que temos. Parece ótimo, mas acho que a animação da caixa de seleção dentro do pop-up deve começar um pouco mais tarde na linha do tempo Vamos começar logo após o término da animação Zoom in. Então fique aqui, insira a pré-composição pop-up e mova as duas pré-composições até esse momento Incrível. Feito isso, vamos voltar à composição principal e comparar a animação com a narração Preste atenção em como o VO indica onde essa cena deve terminar. Foto. Cada projeto inclui tarefas detalhadas, subtarefas e acompanhamento do progresso em tempo real Então, nada escapa pelas fendas. Quer? Tudo parece ótimo. Agora podemos começar a trabalhar na animação externa dessa cena porque, nesse momento, a próxima cena já deve começar Primeiro, vamos entrar em cena. Antes de prosseguir, vamos expandir a camada de texto rapidamente. Agora vamos encontrar um bom momento para começar a animação externa Acho que podemos começar em 7 segundos e 20 quadros. Então, vamos criar quadros-chave nesse momento. Em seguida, avance 1 segundo. Na linha do tempo, crie uma animação externa simples em que a pré-composição se move para baixo, para fora Em seguida, acesse o editor gráfico e defina a velocidade para 95% para tornar o movimento um pouco mais rápido. Eu quero que seja assim porque estou me preparando para uma transição de Match Cut para a próxima cena. Pensando bem, acho que devemos deixar uma pausa um pouco mais longa antes que a tela da interface se afaste. Na minha opinião, o Otro começa logo após a animação da caixa de seleção Vamos mudar a animação externa para começar em 8 segundos. Ótimo. Agora vamos encontrar o ponto mais rápido no movimento Otro e na safra principal da composição, a pré-composição neste momento Agora vamos entrar novamente na cena e cortar a linha do tempo 1 segundo após o término da animação atral Não gosto de terminar as cenas logo no movimento final. Eu sempre prefiro deixar 1 segundo de tempo livre para o caso de precisar fazer ajustes mais tarde. Tudo bem, com isso feito, podemos passar para a próxima cena, que no nosso caso, é outra animação do título Para fazer isso rapidamente, vamos duplicar a animação do título que já temos na linha do tempo e colocá-la logo após a última cena O bom é que ele já cortado para se adequar à transição do Match Cut Mas se inserirmos essa pré-composição e alterarmos o texto, ela também atualizará o texto na primeira animação do título, já que é a mesma pré-composição, e não é isso que queremos corrigir Precisamos duplicar a pré-composição no painel do projeto. Em seguida, substituiremos a pré-composição antiga na linha do tempo por esta nova. Ótimo. Agora, insira a nova pré-composição do título e altere o texto interno Como você pode ver, o texto é maior que o primeiro. Para corrigir isso, vamos reduzir o tamanho da fonte. Cerca de 100 parecem boas. Uma vez feito isso, não se esqueça de adicionar o traço abaixo da palavra importante no texto. No meu caso, vou colocá-lo aqui. Ótimo. Agora substitua a pré-composição antiga na linha do tempo por esta nova Dessa forma, mantemos o recorte da animação do título anterior , mas com um novo texto dentro E assim, temos outra transição perfeita de match cut. Agora estamos prontos para passar para a próxima lição e começar a criar a próxima cena. Mas antes disso, vamos corrigir um último detalhe. Se você não percebeu, não temos os ícones da caixa de seleção que precisam estar na lista de tarefas principal Eles não precisam ser animados. Então, vamos entrar na pré-composição pop-up e copiar a camada do ícone da caixa de seleção de Agora, volte para a tela de tarefas da interface do usuário antes da composição e cole a camada Antes de colar, certifique-se de estar no momento em todas as camadas estão em seu estado estático No nosso caso, isso está no início da animação. Tudo bem, agora coloque o ícone dentro da primeira tarefa na lista. Uma vez feito isso, duplique-o e coloque-o na segunda tarefa. Perfeito. Agora, como as tarefas si têm uma animação emergente, queremos que as caixas de seleção se movam com Portanto, certifique-se de colocar cada caixa de seleção sua camada de tarefa correspondente Visualize a animação para garantir que ela funcione. Se uma caixa de seleção não se mover corretamente, você provavelmente a colocou na camada errada, basta reconfigurá-la para a correta Faça o mesmo com o segundo ícone da caixa de seleção. Tudo bem, com isso feito, terminamos esta lição Agora você pode salvar o projeto e fechar todas as pré-composições para manter tudo limpo Deixe apenas a placa de vídeo e a composição principal abertas. E agora estamos prontos para passar para a próxima lição. Nos vemos lá. 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. 19. Animando a tela da UI de contatos em 3D: Volte. Nesta lição, começaremos a trabalhar na tela da interface de contatos. Então, primeiro de tudo, vamos ver qual deve ser a duração da cena. Começa nos segundos 38 e 28 quadros e termina nos segundos 42 e 18 quadros. Isso significa que temos aproximadamente 4 segundos e alguns quadros para animar a cena Com isso em mente, vamos agora criar uma nova composição e chamá-la de cena seis Verifique se as configurações estão corretas e clique em. Ok. Ótimo. E agora vamos trazer a tela da interface de contatos para a nova cena. Eu quero animar a cena, semelhante a essa referência. Isso significa que com certeza precisaremos usar o espaço de três D. Com isso em mente, vamos entrar na pré-composição e primeiro selecionar todas as camadas aqui e reduzi-las e, logo depois, converter todas elas em três camadas D. Ótimo. E agora vamos começar a preparar essa tela de interface do usuário para animação. O que quero dizer com isso é que podemos pré-compor as camadas relacionadas a cada seção Será muito mais fácil para nós a longo prazo. Então, primeiro, podemos bloquear as camadas que sabemos com certeza que não vamos pré-compor Agora, vamos selecionar todas as camadas da seção principal e pré-compô-las Preste atenção, pois não estou selecionando as caixas de contato. Isso porque eu quero que eles permaneçam do lado de fora, que eu possa animá-los sem mexer com camadas que não serão Ótimo. E agora vamos também selecionar essas três camadas que pertencem à seção principal e recortá-las daqui colá-las dentro da pré-composição Ótimo. Agora vamos voltar à cena principal e pré-compor as camadas da seção superior Agora, vamos lidar com a ação dos contatos. Como há algumas camadas que pertencem a cada caixa de contato, precisamos selecionar todas as camadas relacionadas a essa caixa de contato e pré-compô-la Vamos chamá-la de tela cinco, contato um. Podemos copiar o nome e depois continuar pré-compondo o resto das seções de contato e colar o nome para a Só não se esqueça de ajustar o número. Vamos fazer isso com o resto dos contatos. Incrível. Feito isso, vamos ativar novamente todas as pré-composições, reduzi-las e convertê-las em três camadas D. Finalmente, vamos centralizar o ponto de ancoragem para todos eles. Você pode clicar em uma pré-composição para garantir que o ponto de ancoragem Tudo bem. Tudo parece ótimo, e agora podemos salvar o projeto antes de prosseguir. Também vamos usar essa oportunidade para organizar nosso painel de projetos. Vamos abrir a pasta Screens e arrastar todas as precomposições que criamos para essa cena na cena anterior Dentro da pasta Screens, somente a tela principal da interface do usuário deve permanecer Nada mais. Para todos os outros precoms, podemos arrastá-los para dentro da pasta principal de precoms Ótimo. E agora estamos prontos para começar a animar a cena A primeira coisa que podemos fazer é criar uma animação de introdução para essa cena Como estamos lidando com três camadas D, podemos criar uma nova câmera de 35 MM na cena e usá-la para criar uma boa animação de zoom para a introdução No início da animação, vou mover a câmera para trás Isso é o suficiente. Agora, vamos avançar 1 segundo e aproximar a câmera da tela da interface do usuário. Observe que precisamos economizar espaço na área superior do quadro para adicionar o texto que precisa estar nessa cena. Por conveniência, podemos abrir a grade de ação segura do título e brincar com os valores da posição. Tudo bem, acho que parece bom. Agora, vamos ficar na segunda e começar a criar a animação emergente para as pré-composições dos contatos Primeiro, precisamos abrir a propriedade position e criar o primeiro quadro-chave aqui Em seguida, vamos avançar 1 segundo e criar o mesmo quadro-chave aqui também Depois disso, vamos ficar no meio da animação e aproximar todas as pré-composições da câmera Certifique-se de não definir o valor manualmente de uma só vez para todas as pré-composições, pois isso também ajustará o resto dos eixos de posição, o que não é o que Portanto, verifique se você está ajustando o valor arrastando o eixo Z. Vamos agora mover as pré-composições para a esquerda. Então, quando eles saírem, eles serão colocados no centro da composição. Continue ajustando os valores da posição até que estejam um pouco mais próximos da câmera e bem centralizados horizontalmente Tudo bem Eu acho que parece bom. Vamos ficar no início dessa animação e agora abrir a propriedade de rotação para criar um bom efeito de rotação durante a animação. No nosso caso, usaremos o eixo de rotação Y. Então, primeiro, vamos criar o primeiro quadro-chave com o valor zero neste momento Em seguida, vamos passar para a segunda segunda e criar o mesmo quadro-chave aqui Agora vamos ficar no meio da animação e começar a ajustar a rotação para cada uma das pré-composições Neste ponto, estou apenas tentando girar cada pré-composição, mantendo uma mudança de rotação semelhante em todas elas Isso significa que podemos definir a rotação da pré-composição superior para 30. Para o próximo, defina-o para 20. O próximo será dez. A seguinte , podemos deixar em zero. O próximo será menos dez. Depois disso -20, e o final -30. A rotação parece boa, mas como você pode ver, a pré-composição inferior é cortada na parte inferior da Então, enquanto estamos no meio da animação, vamos ajustar a posição de todas as pré-composições e movê-las um pouco para cima Incrível. Agora, depois de criarmos a animação inicial, podemos selecionar todos os quadros-chave e facilitá-los e, em seguida, ajustar seu movimento no editor gráfico Quero que o movimento comece rápido, depois diminua no meio e ganhe velocidade no final. Vamos ver como isso parece. Tudo bem Eu acho que parece ótimo. Mas, na minha opinião, a animação está muito rápida por enquanto. Então, vamos voltar à linha do tempo. Fique no terceiro segundo lugar, selecione todos os quadros-chave, mantenha pressionada a tecla Alt ou opção e arraste-os do último quadro-chave até a do indicador de tempo. Tudo bem Agora a velocidade é ótima e podemos criar um bom deslocamento entre as pré-composições para torná-la um pouco mais Desta vez, usarei o novo recurso de efeitos posteriores para compensar quadros-chave Então, primeiro, vamos escalar esse painel para que possamos ver todos os quadros-chave Agora, certifique-se de selecionar os quadros-chave da camada a partir da você deseja que o deslocamento comece No nosso caso, quero que a primeira pré-composição superior inicie o movimento É por isso que selecionarei todos os quadros-chave da camada inferior no painel de camadas da composição É a primeira pré-composição superior, então não se confunda. Tudo bem. E agora vou mover, digamos, dois quadros após os primeiros quadros-chave e, em seguida, manter pressionada a tecla Alt, controlar e mover os quadros-chave até ver os próximos quadros-chave de pré-composição alcançando a posição do indicador de tempo Vamos ver como isso parece. Tudo bem, acho que está ótimo. E agora, após o término dessa parte da animação, podemos ficar neste momento e criar a animação atro para essa cena. Então, vamos criar o primeiro quadro-chave para a posição da câmera aqui e, em seguida, avançar 1 segundo Isso significa que precisamos ficar nos segundos quatro e dez ou 12 quadros. Agora podemos retroceder a câmera manualmente, ou podemos simplesmente copiar o quadro-chave da primeira posição da câmera e colá-lo Incrível. E agora vamos definir a velocidade dessa animação em 95% para que possamos criar uma boa transição de match cut Ok, acho que está tudo bem. A única coisa que precisamos adicionar aqui é uma camada de texto que deve ser apresentada nesta cena. Para isso, vamos entrar em uma de nossas cenas em que já temos uma camada de texto e copiá-la de lá para que possamos colá-la em nossa nova cena. Vamos agora entrar na cena seis e colar a camada de texto aqui. Expanda essa camada e inicie-a do início da linha do tempo Depois disso, podemos ir até a placa de vídeo para ver qual deve ser o texto nessa cena. Tudo bem, aqui está o texto. Então, agora vamos ao script e copiemos o texto relevante. Ótimo. Agora, depois de fazer isso, vamos adicionar um movimento secundário da câmera à cena para que ela não pareça tão estática quanto está agora. Para isso, vamos inserir a pré-composição de contatos e criar um novo objeto nulo que usaremos para criar o movimento secundário da câmera Primeiro, precisamos convertê-lo em uma camada de três DD. Agora, vamos garantir que o objeto nulo seja colocado no centro da composição, levante-o até que ele se alinhe com o ponto central da grade de ação segura Tudo bem E agora vamos associar a câmera à nossa câmera nula e alterar o nome do nulo para câmera nula. Ótimo. Então, agora vamos ao início da linha do tempo e criaremos um quadro-chave de primeira posição para o Agora vamos parar no momento em a cena curta já terminou, que no nosso caso, é a segunda quinta. Agora vamos ajustar o eixo de posição Z para o nulo para que ele se aproxime um pouco da tela da interface do usuário Vamos configurá-lo para 600 e ver como fica. Acho que está muito perto. Então, vamos ficar no último quadro-chave e alterá-lo para 400 Ainda podemos ver o contato inferior cortado na área inferior da moldura Para corrigir isso, podemos cronometrar o movimento da câmera secundária com a animação das pré-composições de contato Isso significa que podemos ficar no meio da animação que aparece e ajustar a animação da câmera secundária neste momento Podemos aumentar um pouco o nulo. Vamos ver como isso parece. Tudo bem, acho que parece bom, mas podemos cobrir o texto na cena principal depois de criar essa animação Então, vamos voltar para a composição da cena principal e ver o que temos aqui Sim, como pensei, estamos cobrindo o texto, que não é o que queremos. Então, vamos tentar corrigir isso. Primeiro, podemos aumentar um pouco o texto e ver como fica agora. Vejo que a tela da interface do usuário está quase tocando o texto, mas, por enquanto, vamos deixar como está, porque o mais importante é que possamos ver o texto com clareza Então, antes de nos aprofundarmos nos detalhes, vamos primeiro verificar se a animação que criamos está sincronizada com uma narração, que, por enquanto, é a coisa mais importante a vamos primeiro verificar se a animação que criamos está sincronizada com uma narração, que, por enquanto, é a coisa mais importante a ser resolvida antes de ajustar a Então, vamos voltar à composição principal e trazer a nova cena para a linha do tempo Agora vamos garantir que a transição do match cut funcione corretamente. Para isso, precisamos entrar na cena e, em seguida, na pré-composição da tela da interface do usuário Agora precisamos chegar ao ponto em que a animação de introdução está em alta velocidade, que está no quadro 15 nesta linha do tempo Agora podemos voltar para a composição principal e cortar a pré-composição para a posição dos indicadores de tempo. Ótimo. E agora vamos fazer o mesmo com a animação externa. Vamos descobrir o momento em a animação externa é a mais rápida Vamos ficar aqui com o indicador de tempo. Agora vamos voltar à composição principal e cortar a pré-composição até a posição dos indicadores de tempo Incrível. Feito isso, agora vamos nos concentrar em assistir à animação enquanto ouvimos a narração para ver se tudo está sincronizado perfeitamente Atrás, basta acessar a guia da sua equipe para ver as atividades de todos em um piscar de olhos. Preciso cair, tudo bem. Acho que a animação do Otro precisa acontecer mais tarde. Deveria ser neste momento. Então, vamos ficar aqui e estender a pré-composição até a posição dos indicadores de tempo Depois disso, vamos acessar a animação Otro e garantir que ela comece a partir desse momento Podemos fazer a animação externa, começando exatamente a partir dos quatro segundos apenas para manter uma linha do tempo mais organizada Alguns quadros não afetarão muito a precisão do afundamento. Ótimo. Então, agora vamos encontrar o novo momento mais rápido para a animação externa, que está em algum lugar por aqui Agora, volte para a composição principal e ajuste a duração da cena de acordo Incrível. E com isso feito, agora podemos entrar na cena e terminá-la na sexta segunda, que é 1 segundo após o término da animação externa. Ótimo. Então, agora que tivermos tudo certo, podemos passar alguns minutos ajustando a aparência da cena, especialmente no momento em que a tela da interface do usuário está quase cobrindo o texto Então, primeiro, vamos entrar na tela de contato pré-comp e ajustar o movimento da câmera secundária que temos aqui Podemos começar ajustando o último quadro-chave. Vamos configurá-lo para 300, que a câmera fique um pouco mais longe da tela. O mais importante é que você saiba o que ajustar caso tenha uma situação semelhante em seus projetos futuros. Vou apenas trazer o quadro-chave final da posição original da câmera para o segundo quinto Então, teremos uma animação externa completa de 1 segundo. Agora, será muito mais fácil ficar no meio da animação, que tem 4 segundos e 15 quadros. Então, vamos voltar para a composição principal e garantir que a pré-composição esteja no ponto correto. Incrível. Então, agora terminamos animar a cena da tela de contatos E agora vamos voltar para a placa de vídeo e ver o que precisamos fazer a seguir. Como você pode ver, temos outra animação do título que precisa começar após a cena de contato. Então, vamos voltar à composição principal e repetir o mesmo processo que fizemos na lição anterior Primeiro, duplique uma das pré-composições da animação do título na linha do tempo e, em seguida, duplique-a no painel do projeto para alterar o texto sem afetar o Vou acelerar esse processo e você pode acompanhar. E para finalizar, é claro, substituiremos entre os dois. Vamos ver como isso parece. Tudo bem, e com isso, terminamos esta lição. Agora estamos prontos para passar para a próxima, onde começaremos a criar a cena mais complexa desse projeto. Vai ser super interessante, então nos vemos na próxima. 20. Criando uma demonstração complexa de animação de fluxo: Estou de volta. Nesta lição, começaremos a trabalhar na animação de fluxo de demonstração mais complexa que temos no projeto. Precisaremos apresentar a tela principal de mensagens se transformando na seção de conversas privadas Vou te ensinar um dos melhores métodos para lidar com esses tipos de situações em que temos muitas camadas que precisam se transformar em outras camadas. Então, vamos começar. Em primeiro lugar, como costumamos fazer, precisamos começar verificando qual será a duração da cena. Nesse caso, a cena começa no segundo 44 e termina no segundo 50. Isso significa que, no total, temos aproximadamente 6 segundos para animar toda a animação do fluxo de demonstração Com isso em mente, vamos voltar à composição principal e fechar todas as pré-composições relevantes que temos no painel de composição. Ótimo. E agora, a primeira coisa que precisamos fazer antes de animar a cena é entender profundamente o que precisamos fazer na animação de fluxo de demonstração Isso significa que precisamos nos fazer algumas perguntas importantes. Por exemplo, quais camadas em cada tela da interface devem aparecer ou desaparecer? Quais camadas podem ser transformadas e quais camadas devem sair do quadro, quais camadas precisam ser apresentadas nas duas telas e outros enfeites Para responder a todas essas perguntas, é melhor abrir as duas telas da interface do usuário e começar a investigar No nosso caso, a maior parte da ação estará na seção principal da tela de mensagens. Precisamos transformar as caixas de bate-papo na lista para serem apresentadas em sua segunda forma de design conforme mostrado na segunda cena de mensagens Também podemos ver que o menu esquerdo e o cabeçalho não mudam. Devemos ter isso em mente. Nosso foco principal estará aqui na seção principal. Então, agora que entendemos o que precisamos fazer mais ou menos, podemos começar criando uma nova composição que podemos chamar de cena sete e começar a prepará-la para a animação. Dentro dessa composição, tentaremos combinar as duas telas de interface de necessárias para criar a animação de fluxo de demonstração, que são mensagens e mensagens para pré-composições Vamos começar criando uma nova composição. Antes de prosseguir, vamos arrastar rapidamente a nova composição para fora dessa pasta E agora vamos trazer a primeira tela da interface do usuário para a linha do tempo Ótimo. Feito isso, quero ensinar a você o principal processo de pensamento quando você precisa criar uma transição para várias camadas entre duas cenas. Vamos entrar na pré-composição e começar a trabalhar, e eu explicarei isso lentamente, passo a passo A primeira coisa que você precisa verificar é se essa cena será animada em um espaço de três D ou não, porque se for, é melhor converter todas as camadas em três camadas D agora antes de prosseguir. No nosso caso, não vamos animá-lo em um espaço de três D, então vamos mantê-los como duas camadas D. Depois disso, podemos passar para a próxima etapa, que é pré-compor as camadas Como temos uma grande quantidade de camadas aqui, precisamos pensar em quais camadas podemos pré-compor para ter uma linha do tempo mais limpa No nosso caso, como já vimos anteriormente, sabemos que o menu esquerdo no cabeçalho não mudará nas duas telas. Isso significa que podemos selecioná-los na primeira mensagem, pré-compilá-los e pré-compô-los e pré-compô-los Aqui estão as camadas que podemos pré-compor primeiro. Mas antes disso, não vamos esquecer reduzir todas as camadas neste momento, não precisemos fazer isso mais tarde depois de colocá-las em pré-composições separadas Isso levará mais tempo, então podemos economizar tempo recolhendo todas as Tudo bem. Então, agora vamos selecionar as camadas que já podemos pré-compor, incluindo a caixa cinza principal dessa tela da interface do Podemos chamá-la de tela seis, painel um. Vamos encontrar a pré-composição recém-criada no painel do projeto e garantir que ela esteja fora e não dentro de alguma pasta Queremos alcançá-lo rapidamente por enquanto. Tudo bem. E agora vamos reduzir a pré-composição na linha do tempo e colocá-la abaixo de todas as camadas Agora podemos bloqueá-lo e antes de prosseguir, salvar o projeto. Incrível. E agora vamos ver se precisamos pré-compor outra pilha de camadas ou não. Para isso, podemos encontrar o arquivo Illustrator da próxima tela da interface do usuário na pasta de ativos dessa tela da interface do usuário e clicar duas vezes nele para abri-lo no painel de visualização secundário Dessa forma, agora podemos verificar as duas telas e começar a pensar e planejar a animação do fluxo de demonstração. Como você pode entender, a animação do fluxo de demonstração nesta cena precisa mostrar a animação do clique em um dos bate-papos e, logo após , precisamos apresentar o painel de conversa que mostrará o bate-papo desse contato Mas agora você provavelmente está pensando em como criaremos essa transição. Tem muitas camadas dentro das duas composições. Do que precisamos começar? Para responder a todas essas dúvidas, você precisa começar a pensar com uma mentalidade muito simplificada Você precisa dividir todos os ativos de design aqui em diferentes partes de animação, semelhante ao que já fizemos no curso. Nesse caso, como temos muitas camadas, vamos começar a pensar em como pode ser a separação. Por exemplo, vou me concentrar primeiro na primeira tela de mensagens e encontrar um ativo de design que precisa ser alterado na segunda tela. Nesse caso, vamos começar com os ícones de estrelas. Essa pode ser a parte da animação com a qual trataremos primeiro. Neste momento, não precisamos nos preocupar com o tempo e a duração de cada parte da animação. Também não precisamos nos preocupar em garantir que ele seja sincronizado com a narração Por enquanto, estamos nos concentrando apenas na criação da animação de fluxo de demonstração. Isso significa que agora precisamos criar uma animação externa e uma animação de introdução para todas as camadas que temos nas duas telas de interface com as quais estamos lidando Tudo bem. Agora, estou apenas olhando a primeira e a segunda tela para entender qual animação de transição posso fazer para essa parte da animação. Na primeira tela, eles aparecem no lado esquerdo da caixa e, na segunda tela, aparecem no lado direito. Então, para facilitar minha vida, posso criar uma animação externa simples, usando a propriedade de escala para fazer as estrelas na primeira tela desaparecerem, e posso criar uma introdução para as estrelas na segunda tela usando também a propriedade de escala Então, por enquanto, não se preocupe com mais nada. Vamos nos concentrar apenas nessa parte. Então, vamos fechar a segunda pré-visualização e começar selecionando todas as camadas de ícones de estrelas que temos na cena. Ótimo. E agora, eles estão todos colocados na mesma área na pilha de camadas Vamos mover uma delas para cima no painel de camadas. Uma vez feito isso, agora podemos marcá-los com uma cor diferente. Ótimo. E agora podemos ampliar a linha do tempo e começar a criar a animação externa a partir do início da linha do Vamos abrir a propriedade de escala e decidir se a animação durará 1 segundo. Posteriormente, podemos ajustar todas as partes da animação que criamos para caber na narração. Por enquanto, vamos nos concentrar em criar essas partes de animação para a animação de fluxo de demonstração. OK. E agora, para tornar essa animação um pouco mais interessante, vamos definir que as estrelas sejam um pouco maiores no meio da animação para obter aquele movimento saltitante Ótimo. Agora, quando terminarmos de criar o outtro para as estrelas, vamos selecioná-las todas e colocá-las acima de todas as camadas Colocaremos cada parte da animação acima da anterior para obter um cronograma limpo e organizado Em breve, você verá o que quero dizer. Incrível. Agora podemos conferir a animação mais uma vez. Acho que devemos escalá-los mais no meio da animação. Eles são muito pequenos, então quero que o espectador os observe antes que desapareçam. Acho que podemos definir a escala para 200. Sim, parece melhor. Incrível. Agora terminamos a primeira parte da animação e estamos prontos para decidir qual deve ser a próxima. Para isso, você sempre pode voltar para ver a segunda tela da interface do usuário e entender melhor o que fazer. Talvez possamos lidar com o texto aqui, ou podemos decidir lidar com todos os ícones aqui no lado direito. De qualquer forma, para facilitar a seleção das camadas, vamos selecionar a caixa branca desta seção e bloqueá-la. Agora vamos selecionar todos os ícones no lado direito. Como você pode ver, também selecionamos as pequenas caixas brancas de cada bate-papo. Então, vamos segurar a tecla Shift e desmarcá-las. Ótimo. E agora vamos colocar todas as camadas selecionadas acima de todas as camadas no painel Camadas. Em seguida, vamos marcá-los com uma cor diferente. Tudo bem. E agora vamos garantir que nenhuma camada esteja selecionada e pressione para fechar todas as camadas anteriores. Feito isso, vamos criar uma animação Otro para todos os ícones que acabamos de marcar a partir do segundo, logo após o Otro das estrelas Vamos usar a propriedade de escala desta vez também. Tudo bem. Acho que está tudo bem, e podemos passar para a próxima parte. Vamos agora lidar com o texto na cena. Como você pode ver, o nome do contato não está mudando. Está apenas mudando um pouco de posição. Mas as outras camadas de texto que temos aqui estão mudando completamente. Com isso em mente, vamos criar uma animação externa para todas as camadas de texto, exceto os nomes Nós vamos lidar com isso mais tarde. É melhor terminar com as partes de animação mais simples e depois começar a pensar nas mais complexas. Tudo bem. Com isso dito, vamos voltar ao projeto e selecionar toda essa área. Agora, vamos desmarcar as caixas brancas. Ótimo. Em seguida, vamos colocar todas as camadas no painel de camadas e marcá-las com uma cor diferente. E agora vamos criar uma animação Otro para o All a partir dos três segundos, logo após os ícones Outro Desta vez, vamos usar a opacidade para criar uma animação de fade out para Incrível. E agora vamos fechar todas as camadas, salvar o projeto e passar para a próxima parte da animação. Para manter a linha do tempo organizada, vamos começar a próxima parte da animação na terceira segunda, logo após a animação de texto esmaecida E desta vez, vamos nos concentrar em criar a animação de transformação para as caixas de bate-papo Precisamos fazer com que todos tenham a mesma aparência na próxima tela da interface do usuário. Deixe-me mostrar a melhor abordagem para lidar com esses tipos de situações em que você deseja criar uma animação de transformação para os painéis de interface do usuário em vez de apenas criar animações externas e de introdução usando escala usando Tudo bem. Então, a primeira coisa que podemos fazer é criar uma nova camada de forma que usaremos em vez das camadas do Illustrator da caixa É melhor porque teremos muita liberdade para alterar a forma dessa forma posteriormente. Então, vamos garantir que nenhuma camada seja selecionada. Amplie um pouco, selecione a ferramenta retângulo e crie uma nova forma exatamente do tamanho da caixa branca Agora, vamos abrir as propriedades da forma e desmarcar as proporções restritas, para que possamos ajustar a largura e a altura separadamente. Ótimo. E agora vamos arredondar os cantos para que corresponda ao design original. Incrível. Em seguida, vamos adicionar um traço cinza fino a essa forma. Para obter a cor exata, podemos verificá-la no design original no Illustrator Então, vamos encontrar essa tela de interface do usuário. Aqui está. Podemos usar a ferramenta de seleção direta para selecionar a forma relevante. Agora, podemos copiar o código de cores do traçado. De volta ao After Effects, vamos colar esse código na cor do traçado da nossa forma. Finalmente, vamos ajustar a largura do traçado. Acho que configurá-lo para dois parece perfeito. Ótimo. Feito isso, vamos agora cortar essa camada dessa pré-composição e colá-la na tela da interface do usuário das primeiras mensagens Agora precisamos começar a animá-lo. Por conveniência, vamos diminuir a opacidade para que possamos ver onde ela deve ser colocada em toda a animação Vamos colocá-lo aqui por enquanto. Agora vamos mover o indicador de reprodução para segundo quarto porque em breve criaremos um quadro-chave para que a forma a mesma aparência que está agora No terceiro segundo, deve ter a mesma aparência nesta tela de interface do usuário. Mais longo e mais fino. Incrível. Agora podemos começar a criar a animação de transformação. Podemos animar a propriedade de tamanho ou converter a forma em um caminho de Bézier, o que nos dará mais liberdade para alterar Mas antes de fazermos isso, vamos primeiro fazer com a forma fique exatamente como deveria na tela atual da interface do usuário antes se transformar em sua forma na próxima Então, vamos colocar essa camada exatamente no meio da longa caixa branca que temos aqui. Para garantir que esteja perfeitamente alinhado, vamos abrir as réguas, selecionar a forma longa e criar uma nova guia na posição do ponto de ancoragem Dessa forma, sabemos exatamente onde nossa nova forma deve ser colocada. E. Feito isso, podemos remover a guia e fechar as réguas. Tudo bem. Então, agora vamos usar a propriedade size para a animação de metamorfose Primeiro, crie um quadro-chave com os valores atuais porque, nesse momento, a forma deve ter a mesma aparência que está agora Em seguida, vamos voltar aos três segundos e ajustar o tamanho da forma para caber nas dimensões da caixa longa que temos nesta tela de interface do usuário. Feito isso, agora podemos trazer a opacidade de volta para 100% e continuar ajustando a animação Em seguida, precisamos ajustar sua posição no momento em que a forma muda para a aparência desejada na próxima tela da interface do Para ver exatamente onde ele precisa ser colocado, vamos usar a camada Illustrator da tela da interface do usuário da segunda mensagem como referência Então, vamos trazer isso para a linha do tempo e diminuir sua opacidade para comparar a aparência da próxima tela com a atual Como você pode ver, a segunda tela é um pouco mais alta que a primeira Não vamos nos preocupar com isso por enquanto e focar apenas em posicionar a forma corretamente. Para evitar confusão com todas as camadas, vamos trazer a opacidade da próxima camada de referência de tela de volta para 100% e criar guias que correspondam ao posicionamento das caixas de bate-papo Dessa forma, não precisaremos ativar e desativar a camada de referência para verificar se tudo está Feito isso, podemos excluir a camada de referência e bloquear as guias para que elas não interfiram em nosso fluxo de trabalho. Ótimo. Agora vamos desativar todas as camadas que não são relevantes para essa parte da animação que possamos focar nas caixas com mais clareza. Quero que você entenda que não vamos animar as camadas originais da caixa Em vez disso, duplicaremos a forma que criamos, mas ainda manteremos as camadas da caixa na cena como pontos de referência Então, por enquanto, vamos selecioná-los todos e colocá-los juntos em uma área. Em seguida, podemos marcá-los com uma cor diferente. Por enquanto, vamos desligar todas as caixas, exceto a primeira na cena, para que possamos nos concentrar em sua animação transformadora Antes disso, vamos organizar os ativos dentro das caixas de contato. Também podemos marcá-los em uma cor diferente. Espere, notei que há uma camada no meio da pilha Vamos isolá-lo para ver o que é. Vejo que é um ícone de estrela da primeira parte da animação. Por algum motivo, esquecemos de movê-lo com o resto das estrelas Para corrigir isso, vamos selecionar todos os ativos dentro das caixas de contato e movê-los abaixo da camada estelar. Bom. Agora podemos desligá-los e continuar trabalhando na animação das caixas. Primeiro, vamos ao ponto em que nossa forma já mudou de forma. Aqui, usaremos a propriedade position para ajustar seu posicionamento. Vamos criar os quadros-chave da primeira posição agora. Então, vamos passar para o segundo terceiro porque, no início da animação de transformação, a forma deveria estar aqui No quarto segundo, precisamos movê-lo para a área que marcamos anteriormente com guias. Tudo bem, isso parece bom por enquanto. Antes de prosseguir, vamos também colocar a camada larga da caixa com o resto e marcá-la com a mesma cor. Agora, vamos desativar todas as camadas , exceto a forma que criamos. Agora, vamos duplicar essa forma. Para saber onde colocá-lo, ativaremos novamente todas as camadas de caixas longas marcadas em roxo. Vamos reduzir a opacidade para cerca de 30% e depois bloqueá-los, para que sirvam como referência Agora, vamos voltar à nossa nova forma duplicada. Fique na primeira posição dos quadros-chave, selecione a propriedade para que os dois quadros-chave estejam ativos e ajuste a localização das formas para corresponder à caixa de referência Perfeito. Agora, vamos passar para os segundos quadros-chave e ajustá-los novamente para combinar com as guias da próxima tela Incrível. Agora temos a animação de transformação das duas primeiras caixas Vamos repetir esse processo para o resto das caixas. Duplique a camada, fique nos quadros-chave e ajuste as duas posições Em seguida, ajuste o final. Mais uma vez, duplique a camada, fique nos quadros-chave. Ajuste as duas posições. Em seguida, ajuste o final. Vamos repetir esse processo para o resto das caixas. Agora, como você pode ver, em algum momento, não temos mais uma guia que indique que outra caixa deve ser colocada. Isso porque na próxima tela da interface do usuário, há apenas seis caixas de bate-papo, não nove, como na primeira. Então, para essas caixas extras, vamos movê-las para fora da moldura. Podemos empilhá-los perfeitamente um sobre o outro. O. Incrível. Com isso, terminamos preparar a primeira parte da animação de transformação do chatbox . Agora, vamos selecionar todas as camadas de caixas longas que usamos como referências. Em vez de excluí-los, vamos simplesmente desligá-los e ativar a função shi para que não atrapalhem a linha do tempo Perfeito. Agora, podemos ativar todas as camadas novamente e desativar as guias que criamos. Também vamos mover todas as novas camadas da caixa abaixo do resto dos elementos para manter as coisas organizadas. Ótimo. Agora vamos passar para a próxima parte da animação relacionada às caixas de bate-papo. Primeiro, abra a segunda camada de mensagem do Illustrator possamos entender quais camadas animar em seguida. Neste ponto, podemos começar a lidar com os ícones do Avatar. Ótimo. Agora, feche a pré-visualização e selecione todas as camadas do ícone Avatar na cena. Agora, mova-os juntos no painel de camadas e marque-os com uma nova cor. Vamos decidir que essas animações de avatar devem começar ao mesmo tempo que a animação de transformação da caixa na terceira Mova o indicador de reprodução para o segundo terceiro, pressione P e crie um quadro-chave para a posição de todas as camadas do avatar Em seguida, avance 1 segundo e ajuste suas posições. Para saber exatamente para onde eles devem ir, usaremos a camada Illustrator da próxima tela como referência Vamos trazê-lo e diminuir sua opacidade. Agora, vamos bloquear a camada de referência e selecionar todos os ícones do Avatar. Em seguida, mova-os para as posições corretas. Agora, segure Control ou Command no Mac e clique nessa camada para desmarcá-la e, em seguida, abaixe o restante das camadas para baixo para combinar com o design Repita esse processo para o resto das seções da caixa de bate-papo. Não se sinta sobrecarregado por esse processo. Em projetos reais, você geralmente não lidará com tantas camadas e seções. Estou usando essa configuração complexa aqui no curso para que você possa praticar o máximo possível. O mais importante é que você aprenda a abordar cenas complexas passo a passo, dividindo a cena em partes de animação e focando em cada parte, uma de cada vez Ofereça um ponto de partida sólido ao trabalhar em animações complexas de fluxo de demonstração Tudo bem. Agora, para essas três últimas camadas, vamos colocá-las de acordo com a caixa relevante. Perfeito. Feito isso, podemos passar a animar as camadas de nomes Como de costume, vamos selecionar todas as camadas de nome e marcá-las com uma cor diferente. Agora, amplie um pouco, mova o indicador de tempo para o segundo terceiro, o ponto em que essa parte da animação deve começar, e crie um quadro-chave de posição para todas elas. Avance 1 segundo e ajuste a posição deles um por um, assim como fizemos com os ícones do Avatar. Ótimo. Agora, está feito. Vamos lidar com o restante dos objetos de design nesta seção. Vamos começar com esse botão roxo. Na terceira etapa, animaremos sua posição de onde está agora para onde precisa estar na segunda tela de mensagens Marque-o em uma cor diferente para maior clareza. Abra a propriedade de posição, crie um quadro-chave no terceiro segundo, depois avance 1 segundo e abaixe-o um pouco Perfeito. Em seguida, vamos lidar com esse outro objeto de design. Ele já está presente na primeira tela, então tudo o que precisamos fazer é animar sua posição também Marque-o em vermelho para se manter organizado. Novamente, crie quadros-chave de posição nos três segundos, depois avance e ajuste seu posicionamento. Tudo bem. Então, agora terminamos de ajustar todos os objetos de design que permanecem consistentes entre a primeira e a segunda tela seguir, trataremos dos novos objetos de design que só aparecem na segunda tela. Por exemplo, precisamos adicionar as mensagens de texto dentro de cada caixa de bate-papo. Eu já preparei algumas linhas de texto que podemos usar. Antes de prosseguir, vamos bloquear e isolar a camada de referência para que saibamos exatamente onde colocar o texto Agora vamos criar a primeira mensagem de texto. Vá para a pasta de ativos que você baixou de mim e abra o arquivo PDF chamado Random Messages two. Copie a primeira mensagem. Tudo bem. De volta ao After Effects, cole aqui. Mas em vez de mantê-la como uma única linha de texto, vamos excluir essa camada e criar uma caixa de texto. Dessa forma, ajustar as mensagens de várias linhas será muito mais fácil Ótimo. Agora, abra as propriedades do texto e ajuste as configurações da fonte. Primeiro, reinicie a liderança. Para o tamanho da fonte, vamos defini-lo como 14. Em seguida, coloque-o no lugar certo. Agora, antes de animá-la, vamos duplicar essa caixa de texto para o resto das seções da caixa de bate-papo para que possamos facilmente substituir o texto posteriormente Agora, substitua cada texto duplicado pelas mensagens do arquivo PDF A propósito, gerei todas essas mensagens com o Chat GPT. Expliquei que estou trabalhando em um vídeo explicativo do SAS para uma empresa de CRM e ele criou mensagens de bate-papo aleatórias para usarmos nesta demonstração nesta Legal. Tudo bem. Feito isso, vamos salvar o projeto antes de prosseguir. Agora, mova o indicador de reprodução para a segunda quarta e alinhe todas as camadas de texto para começar daqui Para a animação de introdução, vamos usar a propriedade de opacidade para criar um efeito de atenuação simples para todas Tudo bem. E agora vamos mudar a cor de todas as camadas de texto para preto. Ótimo. E agora vamos trazer de volta todas as camadas para ficarem visíveis e seguir em frente. Vejo que a posição das minhas camadas de texto não está alinhada com o nome, então vou selecioná-las todas e movê-las um pouco para a direita Ok, isso parece melhor. Vamos agora abrir o design do segundo design da mensagem e ver o que podemos fazer a seguir. Acabei de notar que a cor do texto na verdade não é preta. É cinza escuro. Vamos ajustá-lo rapidamente. Selecione todas as camadas de texto. Depois, com a amostra da ferramenta conta-gotas, a cor cinza escuro dos ícones de Avatar no design Sim, isso combina perfeitamente com o estilo original. Agora, vamos pré-visualizá-la com o resto da animação. Um lembrete rápido. Você ainda não precisa se preocupar muito com o tempo. Por enquanto, estamos terminando a animação inicial. Posteriormente, refinaremos o tempo para combinar com a duração geral da cena e a narração Agora vamos passar para os próximos objetos de design. Para ver o que vem a seguir, ative novamente a camada de referência e verifique a área direita das caixas de bate-papo. Aqui podemos começar a animar os ícones das estrelas com uma boa animação de introdução Então, com isso dito, vamos desligar a camada de referência, ir para a pré-composição principal da segunda tela de interface de mensagens e copiar todos os ícones de estrelas que temos lá Agora, volte para a primeira tela de mensagens em que nossa animação de fluxo de demonstração está acontecendo e cole-as aqui. Certifique-se de colar as camadas acima todas as outras camadas nesta linha do tempo Em seguida, marque-os em uma cor diferente para organização. Vamos fazê-los começar no quinto segundo e usar a propriedade de escala para criar uma bela animação de introdução para as estrelas Ótimo. Agora, na segunda sexta, vamos animar o próximo objeto de design Os ícones de hora, selecione todos eles, copie-os e cole-os em nossa cena. Defina seu ponto de partida nos seis segundos. Desta vez, vamos usar a opacidade para um desvanecimento suave Não se esqueça de marcar essas camadas com uma cor diferente e salvar o projeto antes de prosseguir. Depois de verificar a reprodução, acho melhor se os ícones de hora aparecerem junto com os ícones de estrelas Então, vamos movê-los de volta para o segundo quinto. Incrível. Agora, vamos voltar para a segunda tela de mensagens e ver o que vem a seguir. Depois de terminar a animação do fluxo de demonstração para o menu esquerdo nas seções de bate-papo de contatos, agora podemos lidar com a seção de bate-papo principal. Vamos começar com alguns objetos de design simples. Selecione essas quatro camadas, copie-as e cole-as em nossa cena, começando na segunda quinta. Marque-os em uma nova cor. Para sua animação de introdução, vamos usar a propriedade de escala Para adicionar variedade à camada de texto, em vez disso, usaremos um fade na animação com opacidade Perfeito. Agora vamos ampliar as outras três camadas. Feito isso, vamos seguir em frente. De volta à segunda tela, copie as próximas três camadas inicie-as também na segunda quinta. Para essas duas camadas, vamos animar com o desvanecimento da opacidade. E para o terceiro, use uma animação em escala maior. Observe que não estou copiando tudo de uma vez na segunda tela. Em vez disso, estou lidando com cada seção, uma por uma. Essa é a melhor abordagem para animações complexas de fluxo de demonstração Ele mantém tudo estruturado e gerenciável. Agora que terminamos as partes mais fáceis, vamos para a seção final. A área de conversação. Vamos dividi-lo em duas partes, os balões de mensagem superiores e os dois últimos balões de mensagem Os dois últimos exigem uma introdução um pouco mais complexa já que planejei uma conversa personalizada lá Por enquanto, selecione todas as camadas das bolhas superiores, copie-as e cole-as na linha do tempo principal na segunda Ótimo. Agora, marque-os em verde. Em seguida, volte para a segunda tela e copie as camadas dos dois últimos balões de mensagem Cole-os na linha do tempo, começando também na sexta segunda Aumente o zoom e verifique a ordem das camadas com cuidado. É importante que tudo esteja empilhado corretamente, ajuste conforme necessário. Ótimo. Agora, para a introdução, vamos animá-los deslizando parte inferior do quadro Mas primeiro, certifique-se de colocar todos os elementos da bolha na camada do ícone do avatar Perfeito. Agora, faça o mesmo com a segunda bolha Ótimo. Agora, marque cada peça uma cor diferente para se manter organizado. Agora, como queremos que a cena se pareça com o estado final da interface após a introdução, vamos ficar na sétima e criar quadros-chave de posição para dois ícones do Avatar em todas as camadas de bolhas de mensagens relacionadas Em seguida, volte para a segunda sexta e arraste todas essas camadas para baixo para que elas sejam animadas de fora do quadro Vamos deixar assim por enquanto. Enquanto isso, vamos também preparar a parte final da animação da cena, as camadas da caixa de pesquisa na parte inferior, copiá-las, colá-las na linha do tempo e iniciá-las na sétima segunda Para a introdução, usaremos a mesma técnica, deslizando-os da parte inferior da Perfeito. Neste momento, criamos a animação inicial para todas as seções da interface do usuário. Agora, vamos comparar tudo com a referência. Ótimo. Agora, corte a camada de referência de seu lugar, cole-a acima de todas as camadas para facilitar o acesso, marque-a com uma cor diferente e ative-a. Como você pode ver, precisamos ajustar o tamanho da tela principal da interface para combinar perfeitamente com o design original. Para fazer isso, vamos abrir as réguas e criar diretrizes. Primeiro, um para indicar o tamanho geral da tela. E depois mais dois para marcar a parte superior e inferior da seção principal da conversa. Feche as réguas. E agora vamos começar a ajustar a parte mais importante, a seção de conversa em si. Em primeiro lugar, vamos localizar a camada da caixa branca nesta seção dentro do painel de camadas. Aqui está. Agora, a melhor forma de ajustar seu tamanho é converter essa camada do Illustrator uma forma com um caminho mais movimentado Isso nos permitirá animar diretamente o caminho da forma Feito isso, podemos desativar a camada original e evitá-la para que ela não sobrecarregue o painel de camadas Vamos também marcar a nova forma com uma cor diferente para maior clareza. Antes de animar, vamos abrir a camada da forma e verificar se há alguma propriedade desnecessária dentro dela Eu posso ver alguns caminhos irrelevantes aqui. Então, primeiro, vamos excluir esse grupo e, em seguida, excluir também a propriedade merge paths Ótimo. Agora abra o caminho e crie quadros-chave no início da linha do tempo Posteriormente, cronometraremos essa animação adequadamente com o resto da cena. Por enquanto, vamos avançar 1 segundo e selecionar a parte inferior do caminho. Em seguida, arraste-o para baixo até ficar de acordo com a diretriz que criamos anteriormente Perfeito. Agora, vamos fazer o mesmo com a parte superior do caminho. Feito isso, agora precisamos ajustar o tamanho da tela principal da interface do usuário. Para economizar tempo, em vez de redimensionar tudo, decidiremos manter visível apenas a seção principal da conversa O resto das seções da interface do usuário podem desaparecer. Isso não só nos poupa tempo, mas também chama a atenção dos espectadores para a parte mais importante da cena. Você verá o que quero dizer em um momento. Então, vamos ao início da linha do tempo e criar uma animação simples de fade out para a pré-composição do painel um Agora, está completo. Vamos ativar a camada de referência novamente para verificar se perdemos alguma coisa. Percebi que ainda temos mais uma etapa antes de prosseguir, criando uma animação de mudança de cor para o traçado da caixa de bate-papo. Vamos desligar a camada de referência novamente e, por conveniência, desligar também as guias. Agora, passe o mouse sobre as camadas da forma na linha do tempo. Assista ao painel de pré-visualização com atenção. Ao passar o mouse sobre uma camada de forma, você verá suas guias de camada aparecerem em azul A propósito, eles são azuis porque essa camada está marcada em azul. Aqui está a camada de forma correta. Vamos selecioná-lo e pressionar U para revelar os quadros-chave. Fique no início da animação, abra as propriedades do traçado no menu de camadas e crie quadros-chave para a cor do traçado Nesse ponto, deixe a cor como está. Agora pressione você novamente, para que vejamos apenas os quadros-chave. Vá para a segunda quarta e altere a cor do traço para roxo. Podemos provar o roxo diretamente do ícone do botão para manter a consistência com o design. Perfeito. Com isso feito? Vamos salvar o projeto. Isso encerra esta lição. Na próxima, continuaremos trabalhando nessa complexa animação de fluxo de demonstração. Vai ficar ainda mais interessante. Então, nos vemos na próxima lição. 21. Ajustes de temporização e animação de interação com cliques: Volte. Começaremos esta lição ajustando o tempo da animação E como criaremos uma animação de introdução para a cena antes do início da animação de fluxo de demonstração, podemos mover todas as camadas animadas 2 segundos para frente Dessa forma, teremos algum tempo para a animação de introdução da cena. Tudo bem. E agora vamos selecionar todas as camadas da primeira tela da interface do usuário e estendê-las para que possamos vê-las no início da linha do tempo Ótimo. Agora, vamos abrir esses quadros-chave de pré-composição e movê-los também para começar a partir dos dois segundos Como a partir desse momento, a animação do clique precisa acontecer e faremos a transição para a próxima tela da interface do usuário. OK. E agora vamos criar essa animação de cliques. Como você deve se lembrar, precisamos fazer isso nesta caixa de bate-papo de contato. E agora, para criar a animação de cliques. Vamos criar um novo objeto nulo na cena. Certifique-se de que esteja acima dessa camada de forma. Vamos copiar o nome dessa camada de forma e colá-la no nulo para sabermos por qual camada de forma ela será responsável Podemos marcar o nulo em azul. Então, sabemos que pertence a essa parte da animação. Tudo bem. E agora vamos garantir que o ponto de ancoragem do nulo seja colocado no centro desse ícone de avatar E depois disso, vamos transformar a camada de forma relevante no nulo Agora, criaremos uma animação de clique animando a escala do nulo Nesse momento, a animação do clique já deve terminar. Então, vamos criar o primeiro quadro-chave aqui. Agora vamos mover dez quadros para trás e criar um quadro-chave aqui também Finalmente, vamos ficar no meio da animação e reduzir o valor nulo Acho que podemos configurá-lo para 70, certo? E agora, como você pode ver, também precisamos reduzir a escala do resto dos objetos de design dessa caixa de bate-papo. Portanto, vamos selecionar todas as camadas relevantes e decidir criá-las como pais, seja para a camada nula ou para a camada de forma Vamos usar a camada de forma. Vamos dar uma olhada nisso. Percebi que falta de criar o ícone do avatar como pai Então, vamos encontrá-lo rapidamente e associá-lo também à camada de forma. Tudo bem. Então, com isso, terminamos de criar a animação de cliques e agora podemos cortar o nulo para que ele caiba na Não precisamos que essa camada esteja no final da linha do tempo Incrível. E com isso feito, agora podemos passar para a próxima etapa, que é ajustar o movimento Ou seja, facilitaremos facilmente todos os quadros-chave que criamos até agora e tentaremos fazer com que o movimento pareça um pouco mais interessante Primeiro, vamos escalar o painel da linha do para que possamos ver o máximo de camadas possível Agora vamos começar ajustando a animação de cliques. Primeiro, vamos facilitar os quadros-chave e, em seguida, fazer com que o movimento comece rapidamente no início e diminua até o final Acho que podemos fazer esse tipo de movimento para o resto da animação. Na minha opinião, parece bom. Tudo bem. Feito isso, vamos garantir que nenhuma camada esteja selecionada e pressione T para abrir os quadros-chave de opacidade que criamos na cena Ajustaremos cada propriedade por vez Por enquanto, vamos lidar com todos os quadros-chave de opacidade. Portanto, certifique-se de selecionar todos eles e, em seguida, vamos aliviá-los e fazer o movimento como na animação do clique. Incrível. Isso parece bom. Agora, vamos pressionar U para fechar todas as camadas e depois pressionar S para lidar com os quadros-chave da escala Vamos garantir que selecionemos todos os quadros-chave que temos na linha do tempo Agora vamos aliviá-los e ajustar o movimento no editor gráfico. Trabalho. Enquanto assistia à animação, notei que uma das camadas do ícone da estrela está marcada com a cor errada. Então, vou me certificar de encontrar essa camada e marcá-la com a cor certa. Este precisa ser marcado em rosa. Tudo bem. Feito isso, vamos agora fechar todas as camadas e abrir os quadros-chave de posição Vamos selecionar todos os quadros-chave de posição que temos aqui e ajustar o movimento Incrível. Agora, quando terminarmos de ajustar todos os quadros-chave, vamos fechar todas as camadas e pressionar você para ver todos os quadros-chave todas as propriedades que animamos, caso tenhamos perdido o ajuste de alguma propriedade no processo alguma propriedade É sempre uma boa ideia se verificar antes de passar para a próxima etapa. Como você pode ver, temos a animação de tamanho que criamos para as camadas de forma aqui embaixo. Então, vamos ajustar esses quadros-chave também. Para ver apenas os quadros-chave de tamanho, podemos selecionar somente as camadas da forma e , em seguida, digitar o tamanho na barra de pesquisa no painel Camadas Ótimo. Então, agora vamos selecionar todos os quadros-chave do caminho e ajustar o movimento como para o resto da cena Como desmarcamos a proporção restrita para os valores de tamanho, precisamos ajustar os dois valores um por um. Ótimo. Em seguida, podemos ajustar os quadros-chave de cores. Mas antes disso, percebi que sentia falta ajustar o tamanho dos quadros-chave dessa camada. Então, deixe-me fazer isso bem rápido. Ok, agora vamos ajustar os quadros-chave de cores. Incrível com isso feito. Agora podemos salvar o projeto e também fechar a barra de pesquisa antes de passar para a próxima etapa. Vamos dar uma olhada em todos os quadros-chave uma última vez para ver se perdemos alguma coisa Vejo que perdi os quadros-chave do caminho dessa camada de forma Se você também fez isso, vamos ajustar a animação aqui rapidamente. É importante que eu mostre que, quando você tem muitas camadas e quadros-chave, é uma boa ideia verificar você mesmo algumas vezes antes de prosseguir Tudo bem, agora terminamos de ajustar completamente todos os quadros-chave e agora estamos prontos para ver como tudo Então, vamos ajustar o tamanho do painel de camadas e ver toda a animação que criamos desde o início dessa cena. Percebi que o ícone do avatar da segunda caixa de bate-papo está se movendo de forma muito estranha Então, vamos nos concentrar nessa parte e tentar resolver esse pequeno problema. Em primeiro lugar, vamos ampliar e tentar entender exatamente quando o problema começa. Isso está acontecendo na parte de animação de cliques. Então, vamos descobrir onde nossa animação de cliques está na linha do tempo No nosso caso, o que aciona a animação de cliques é o Isso significa que o ícone do avatar provavelmente não está associado ao nulo Talvez esteja associado a outra camada. Acho que a associamos à camada de forma branca, neste caso É muito importante ficar no momento em que a animação do clique acontece e só então encontrar a camada do ícone do avatar e associá-la ao nulo Vamos ver o que temos. Ok, isso parece bom. Agora, vamos também associar o resto dos objetos de design relacionados à caixa de bate-papo à camada nula em vez de à camada de forma Incrível. Agora, tudo parece perfeito e podemos salvar o projeto antes de prosseguir. Na próxima etapa, será uma boa ideia começar a trabalhar no tempo da de transformação que está acontecendo nessa animação de fluxo de demonstração Podemos desativar essa pré-composição por enquanto para focar na animação do fluxo de demonstração Por enquanto, estamos nos concentrando na criação da animação inicial. Depois, melhoramos o movimento e agora podemos ajustar o tempo das camadas. Algumas seções podem começar mais cedo e outras um pouco mais tarde. Para entender o que fazer, costumo voltar e avançar na linha do tempo para ver quais partes da animação no fluxo de demonstração podem ser ajustadas para melhorar a transição Por exemplo, acho que as camadas de texto podem desaparecer um pouco mais cedo na linha do tempo Podemos começar a animação de fade out a partir do momento em que o resto dos ícones começam a diminuir Então, vamos fazer isso agora. Para isso, primeiro precisamos abrir todos os quadros-chave de todas as camadas Agora, vamos encontrar um ponto no tempo em que a animação de texto deve terminar. Acho que pode terminar logo antes da animação de transformação das camadas de forma ou talvez até mais cedo Por enquanto, vamos ficar aqui e encontrar as camadas de texto. Aqui estão elas. São todas as camadas com a animação de opacidade. Então, vamos selecionar todos os quadros-chave de opacidade nessas camadas e movê-los para o início Podemos movê-los todos para começar do ponto no tempo em a animação Otro do ícone começa aqui, na terceira segunda Ótimo. E agora vamos conferir essa animação e ver o que podemos ajustar em seguida. Pelo que eu sinto, acho que podemos começar a apresentação dos ícones no texto ainda mais cedo Vamos começar toda essa parte da animação a partir dos segundos dois e 15 quadros, que estão no meio da animação Otro das estrelas Então, selecione todos esses quadros-chave e mova-os para começar a partir dos segundos dois e 15 quadros Vamos ver como isso parece. Acho que parece muito melhor. Feito isso, vamos continuar verificando a animação e ver qual parte da animação podemos ajustar a seguir. Nesse caso, acho que podemos começar a animação de transformação das formas logo após o Otro dos ícones e a parte de animação de texto, que está nos segundos três e Então, agora vamos selecionar todos os quadros-chave para a próxima parte da animação, que são os ícones do avatar, os nomes e os quadros-chave da forma, e movê-los para os segundos três e 15 quadros . Vamos ver como isso parece. Ótimo. Na minha opinião, parece bom. Agora, vamos encontrar o momento em que podemos iniciar a animação de introdução camadas da segunda tela da interface do Nesse caso, podemos iniciá-lo a partir do segundo quarto, que está no meio da animação de transformação. Então, vamos ficar aqui e, em seguida, rolar para cima na linha do tempo e selecionar todas as camadas da segunda tela da interface Finalmente, vamos fazê-los começar a partir do segundo quarto. Vamos agora ver como isso parece. Incrível. Agora podemos seguir em frente para ajustar a próxima parte da animação. Desta vez, podemos nos concentrar em todas as camadas que precisam entrar cena após as camadas de texto da segunda tela da interface do usuário. Acho que podemos ficar no meio da animação de texto, que é dos segundos quatro e 15 quadros. Então, vamos selecionar todas essas camadas e trazê-las para começar a partir daqui. Vamos agora ver como isso parece. Parece bom. Vamos agora verificar a próxima parte da animação. Desta vez, vamos nos concentrar nas camadas principais da seção de conversação. Na minha opinião, todos eles também precisam começar mais cedo. Acho que também podemos começar essa parte da animação a partir dos segundos quatro e 15 quadros. Ok, acho que parece melhor. Agora, vamos fazer com que a última parte da animação comece a partir dos segundos quatro e 15 quadros, por enquanto. Vamos verificar essa parte algumas vezes para ver como é. Na minha opinião, podemos começar a última parte da animação de toda a seção de conversa junto com as camadas de texto a partir da quarta segunda. Então, vamos selecionar todas as segundas camadas da tela da interface , exceto as camadas de texto , e depois trazê-las para a quarta segunda camada. Estou mostrando esse processo para que você entenda que nunca sabemos com certeza o momento perfeito. Devemos sempre verificar a animação e ver se há um bom fluxo no movimento. Nesse caso, estou feliz com os resultados. Então, vamos agora fazer com que essa animação pareça um pouco mais interessante, e podemos fazer isso criando um pequeno atraso nas camadas da última parte da animação. Essa é a seção de conversação. Eu adoraria ver como ficaria se começássemos a introdução da primeira bolha até a última, uma após a outra. Então, vamos fazer isso agora. Primeiro, para ter uma linha do tempo organizada, alterarei a ordem das camadas dos balões de bate-papo Não precisamos fazer isso, mas eu prefiro ter as camadas organizadas dessa forma. Portanto, o balão de mensagem superior estará abaixo no painel de camadas O segundo balão de bate-papo estará acima dele e assim por diante. Tudo bem. Então, depois de organizar todas as camadas, posso selecionar todas elas, exceto essa, pois ela entrará primeiro na cena e, em seguida, começará a criar um deslocamento de um quadro Não se esqueça de que essas quatro camadas pertencem a um balão de mensagem, então certifique-se de movê-las como uma unidade O mesmo para o último balão de mensagem. Vamos deixar a última parte da animação aqui por enquanto. Primeiro quero ver como isso parece. Vamos ver isso algumas vezes para ver como é. Acho que o deslocamento é ótimo, mas notei que a caixa branca principal desta seção está crescendo tarde demais. Isso significa que perdemos o ajuste do tempo. Então, vamos fazer isso bem rápido. Primeiro, precisamos encontrar essa camada. Aqui está. Agora, precisamos iniciar a animação do caminho a partir do momento em que as caixas de bate-papo começam a se transformar para se adequar ao design da segunda tela da interface do No nosso caso, é dos segundos três e 15 quadros. Vamos ver como isso parece. Ótimo. E agora podemos voltar para a última parte da animação, onde vemos a introdução das camadas da caixa de pesquisa e também criamos um bom deslocamento Para começar, podemos selecionar todas as camadas relacionadas a essa parte da animação e abrir seus quadros-chave Feito isso, vamos agora decidir quais camadas devem entrar na cena primeiro. Quero que essas duas camadas comecem primeiro, então vou trazê-las aqui na pilha de camadas Para o botão, quero que ele entre por último. Então, vou trazê-lo aqui acima de todas as camadas. Em seguida, para o ícone de tintas, acho que ele deveria entrar na cena antes do ícone do Smiley Tudo bem. Então, agora vamos começar a criar o deslocamento Eu quero que esses dois entrem ao mesmo tempo. Então eu quero que o ícone Link entre na cena seguido pelo resto. Vamos ver o que temos. H Acho que podemos começar essa parte da animação um pouco depois da parte dos balões de mensagem Vamos começar essa parte da animação a partir dos segundos quatro e 15 quadros. Ótimo. Então, agora vamos começar a trabalhar na próxima parte da animação, que é a animação de bate-papo que pretendo criar aqui. E então trabalharemos no outtro de toda essa cena que deve acontecer após uma animação de clique no botão Enviar E em vez de animar essa camada, podemos usar o botão pré-composição que criamos anteriormente, no qual já temos a animação de cliques pronta Então, primeiro, vamos encontrar a pré-composição relevante. Aqui está. Dentro da pasta precomps. Caso queira encontrá-lo rapidamente, você pode usar a barra de pesquisa para encontrá-lo. Esse é um dos benefícios de rotular suas pré-composições. Tudo bem. Agora, depois de encontrarmos a pré-composição, precisamos duplicá-la no painel do projeto Agora precisamos ajustar o nome acordo com o número da cena em que estamos trabalhando. Nesse caso, é a cena sete. Ótimo. E agora selecione a camada do botão na linha do tempo e arraste a nova pré-composição sobre ela enquanto mantém pressionada a tecla Alt ou Option para substituí-la mantém pressionada a tecla Alt ou Option para Feito isso, vamos agora ajustar a escala da pré-composição para se adequar ao design Vamos definir a escala para 30. Agora, vamos reduzir a pré-composição e encontrar o momento certo em queremos que a animação de cliques aconteça Como precisamos criar a animação do bate-papo antes da animação do clique, devemos deixar alguns segundos livres para isso e, por enquanto, iniciar a animação do clique a partir, digamos, do segundo oito. Então, vamos inserir o botão precomp e mover os quadros-chave para esse momento Incrível. E agora vamos alterar o texto aqui para enviar antes de prosseguir. Uma vez feito isso, vamos voltar à cena da tela e salvar o projeto para proteger todos os processos realizados até agora. Ótimo. E agora vamos começar a trabalhar na animação de bate-papo que pode começar a partir do sétimo segundo, por enquanto. Primeiro, precisamos adicionar uma animação de digitação de texto aqui. Para isso, podemos usar a animação de digitação de texto que criamos no início do projeto Aqui está. Vamos copiar essa camada de texto. Agora vamos voltar à cena e colá-la acima de todas as camadas. Agora vamos usar a tecla do colchete esquerdo para trazer essa camada para a posição do indicador de tempo Tudo bem? Também podemos abrir os quadros-chave e excluir os quadros-chave de posição neles Ótimo. Em seguida, vamos parar no momento em que a animação é finalizada e ajustar a posição e a localização dessa camada de texto. OK. Isso parece bom o suficiente. Agora, vamos ficar no início dessa animação e recortar o tipo da sua camada de bate-papo até esse momento. Incrível. Então, agora temos uma boa introdução para a animação da mensagem de digitação Feito isso, agora podemos ajustar a mensagem de acordo com o assunto sobre o qual queremos que a conversa seja. Nesse caso. Como a mensagem anterior solicitava um design de interface de usuário, vamos dizer que enviarei um link com uma boa referência. Posteriormente, também alteraremos o texto dentro dos dois últimos balões de mensagem para se adequar ao tópico da conversa Então, agora essa mensagem será enviada e, em seguida, precisamos ter alguns quadros para que o cursor voe até o local do botão e clique nele. Podemos começar a animação de cliques aqui. Vamos inserir o botão, pré-compor e ajustar o tempo dos quadros-chave Incrível. Então, agora, no momento em que a animação do clique começará, o texto pode desaparecer e reaparecer dentro de um balão na seção de conversa acima Isso significa que, a partir desse momento, precisamos criar um balão de mensagem verde com a última mensagem que acabamos de criar Para isso, primeiro, vamos selecionar todas as camadas relacionadas ao último balão de mensagem verde e depois duplicá-las Vamos colocar as novas camadas aqui acima para que as tenhamos em uma pilha Em seguida, vamos pré-compor essas camadas. Podemos chamar essa tela de cinco bolhas um. Incrível. Agora, vamos colocar essa pré-composição abaixo do botão e inseri-la para ajustar o texto interno Primeiro, vamos excluir todos os quadros-chave que temos em todas as camadas aqui Agora, pressione S na última camada e escale-a um pouco. As camadas são muito pequenas para eu trabalhar com elas. Podemos definir a escala para 300. Depois disso, vamos abrir a grade de ação segura e posicionar as camadas no centro do quadro. Ótimo. Agora precisamos desse balão para mostrar o texto para o qual criamos uma animação de digitação na cena da tela Então, vamos voltar e clicar duas vezes na camada de texto que temos aqui para copiar o texto. De volta à pré-composição. Vamos criar uma nova camada de texto e colar o texto. Agora vamos escalar a fonte para, digamos, 42 e criar o balão de mensagem para ela Eu não quero que você me acompanhe por enquanto, porque eu tenho duas maneiras de fazer isso. Eu vou te mostrar o primeiro caminho, mas vamos usar o segundo. Então, quando começarmos a segunda via, avisarei quando voltar à ação. Por enquanto, eu só quero que você veja como você pode criar um balão de mensagem personalizado usando as duas caixas de texto D que já usamos no curso Para começar, adicionarei a caixa de texto à cena e garantirei que ela afete a camada de texto que tenho aqui. Em seguida, vou ajustar as cores e colocá-las abaixo da camada de texto para que possamos ver o texto. Até agora, essas são coisas que já fizemos. Mas agora quero mostrar quais propriedades você precisa ajustar para obter a forma incomum que temos no design original. Preste atenção nos cantos do balão de mensagem verde no design original Nem todos são igualmente arredondados. Portanto, no caso de seus projetos futuros, você precisará criar uma forma exclusiva. Você pode abrir o menu de cantos arredondados e brincar com as propriedades dentro do menu de ativação por canto. Como você pode ver, estou tentando marcar e desmarcar as diferentes caixas de seleção aqui até obter a combinação de configuração correta Nesse caso, desmarque apenas o canto inferior direito arredondado. Foi a configuração correta. Então, tudo o que preciso fazer é decidir qual deve ser a quantidade de arredondamento. Tudo bem, agora vou excluir a caixa de texto que criei e faremos isso juntos usando o segundo método, que é mais simples de criar, mas Nesse caso, eu estou bem com isso. Vou usar a camada original e convertê-la em uma forma com um caminho de Bezier. Agora podemos evitar a camada original. Tudo bem. E agora vamos abrir a nova camada de forma e excluir as propriedades irrelevantes dentro dela, como o grupo que temos aqui e os caminhos de mesclagem Uma vez feito isso, vamos colocar o texto na posição correta. Em seguida, usando a ferramenta Caneta, selecione um dos pontos do caminho. Agora podemos voltar para a ferramenta de seleção e selecionar todos os pontos no lado esquerdo. Em seguida, vamos arrastá-los até que o caminho se ajuste ao comprimento do texto. Podemos excluir essa camada mostrando o texto original. Tudo bem. E agora vamos selecionar todas as camadas que temos aqui e colocá-las no centro do quadro. Isso parece bom, mas acho que agora podemos abrir as configurações de composição e ajustar o tamanho da composição para caber no tamanho do balão de mensagem Vamos definir a altura para 300 e, em seguida, a largura para, digamos, 1.000. Feito isso, vamos agora voltar à composição da tela e criar uma animação de introdução para a nova pré-composição do balão de mensagens Primeiro, vamos fazer com que essa pré-competição comece a partir da segunda oitava Agora vamos ajustar o tamanho da pré-composição para se adequar ao design geral Tudo bem Isso parece bom o suficiente. A animação de introdução desse balão de mensagens começará a partir do oitavo segundo Podemos colocar essa pré-composição acima de todas as camadas. E agora, antes de começar a criar a introdução para esse balão de mensagem, vamos substituir esse balão de mensagem um novo que tenha uma mensagem diferente Precisamos que a conversa pareça um pouco mais realista. Para fazer isso, vamos primeiro encontrar nosso balão de mensagem recém-criado no painel do projeto e depois duplicá-lo a partir daqui Mas antes disso, podemos arrastar essa pré-composição para fora da pasta de telas Não precisa estar aqui. Tudo bem. E agora vamos duplicar a pré-composição. Agora podemos copiar as últimas camadas de mensagem para referência e, em seguida, inserir o novo balão de mensagem, pré-compor e colá-las Vamos primeiro excluir a animação que temos neles e depois colocá-los ao lado do design do nosso balão de mensagens E agora precisamos ajustar o design para que pareça com a referência. Primeiro, podemos virar o balão de mensagem horizontalmente. Então, vamos movê-lo para a esquerda. Agora, vamos mover o ícone do avatar para o lado esquerdo também. Mas antes disso, vamos separar as camadas dos pais para que possamos movê-las sem mover o resto das Nós estamos bem. Feito isso, vamos ajustar a cor da bolha Podemos amostrar a cor da camada de referência. Ótimo. Agora podemos excluir todas as camadas de referência. Agora podemos trazer a hora para o lado esquerdo. Finalmente, vamos mover todas as camadas para o centro da moldura. Incrível. Então, agora podemos centralizar o ponto de ancoragem do balão da mensagem e, em seguida, vamos mudar o texto que temos aqui. Vamos escrever. Eu não tenho nenhuma ideia. Agora, vamos ajustar o caminho da forma para que a bolha se ajuste ao comprimento do texto Ok, vamos mover as camadas para o centro uma última vez. Ótimo. Então, agora vamos voltar para a pré-composição da tela e substituir o balão de mensagens que temos aqui pelo novo E como queremos salvar a animação de introdução desse balão de mensagem, podemos substituir a camada do ícone Avatar pois ela tem a animação de posição nela, e o resto das camadas são associadas a ela. Então, agora arraste a nova pré-composição do balão de mensagem sobre ela enquanto segura Alt ou Option Agora vamos ajustar o tamanho. E depois disso, vamos ajustar sua posição. Em primeiro lugar, vamos abrir os quadros-chave de posição nessa camada Agora devemos permanecer em um dos quadros-chave, selecionar todos os quadros-chave de posição e só então ajustar a Acho que a posição parece boa, mas podemos desligar o horário. criaremos uma animação introdutória Talvez criaremos uma animação introdutória para ela no futuro. Por enquanto, vamos nos ater ao design original. Tudo bem. Agora, com isso feito, terminamos de preparar toda a configuração para a seção de animação da conversa e agora estamos prontos para animá-la Como você deve entender, nossa nova mensagem verde precisa entrar na seção inferior, o que significa que todos os balões de mensagens precisam subir Essa será nossa primeira coisa a resolver. Então, por enquanto, vamos apresentar o último balão de mensagens na linha do tempo Em breve, encontraremos o momento perfeito para isso. Por enquanto, vamos nos concentrar em mover todas as mensagens para cima, e podemos fazer isso usando um objeto nulo Primeiro, vamos criar um novo objeto nulo na cena. Podemos mudar o nome para bolhas nulas. Em seguida, vamos marcá-lo em verde. E agora vamos colocá-lo em uma ordem conveniente para nós na pilha de camadas O que quero dizer com isso é que devemos colocá-lo acima de todas as camadas que serão associadas a ele Não precisamos adicionar o último balão de mensagem verde a ele Mas precisamos transformar o último balão de mensagem cinza no valor nulo Portanto, vamos encontrar a pré-composição desse balão de mensagem e colocar o nulo Podemos mudar a cor dessa pré-composição para espuma C. Agora, vamos colocar o nulo em algum lugar entre os balões de mensagem e, em seguida, começar a todos os balões de mensagem nele Uma vez feito isso, vamos fazer com que o nulo comece a partir do oitavo segundo e animemos sua posição para subir Acabei de perceber que sentia falta criar esse balão de mensagens Então, deixe-me desfazer minha ação e vamos transformá-la em nula Tudo bem? Então, agora mova o nulo para cima para que tenhamos espaço suficiente na área inferior para inserir o novo balão de mensagem que criamos Vamos fazer com que essa nova bolha comece a partir da segunda nona, por enquanto Em breve, criaremos uma boa animação de introdução para ele. Enquanto isso, podemos marcá-lo em verde. OK. E agora, neste momento, não devemos ver a hora desta mensagem. Então, vamos entrar na pré-composição e desligá-la por enquanto. De volta à animação. Precisamos ver a hora da mensagem anterior aparecer e podemos criar uma boa animação de fade in para ela a partir da oitava segunda Então, vamos ficar aqui e depois inserir essa pré-composição. Agora, vamos criar uma animação de fade in para a camada de tempo. Vamos fazer essa animação durar 1 segundo. OK. Isso parece bom. Agora podemos voltar à animação principal e criar uma animação de introdução para o último balão de mensagem Podemos fazer com que essa pré-composição comece a partir da oitava segunda. Agora, vamos pressionar Y para mudar para a ferramenta de ponto de ancoragem e mover o ponto de ancoragem dessa pré-composição para o canto inferior para o Mantenha pressionado o controle ou o comando no Mac enquanto faz isso para encaixá-lo exatamente no canto Feito isso, vamos agora começar a animá-lo. Primeiro, podemos criar uma animação em escala. E como sabemos que a pré-composição deve ter a mesma aparência que está agora, criaremos um quadro-chave aqui criaremos um quadro-chave Em seguida, vamos também adicionar uma animação de rotação a ela. Pelo mesmo motivo, também criaremos um quadro-chave de rotação aqui. Agora vamos recuar 1 segundo e reduzir a pré-composição enquanto a rotacionamos. Dessa forma, obteremos uma boa animação de abertura de rotação Agora vamos facilitar os quadros-chave nulos e fazer com que eles comecem a se mover rapidamente no início Uma vez feito isso, vamos ajustar adequadamente a animação da bolha antes da composição. Mas antes disso, vamos torná-lo um pouco mais interessante fazendo com que seja dimensionado no meio da animação. Dessa forma, o efeito de estouro será mais perceptível. Tudo bem. E agora vamos selecionar todos os quadros-chave e facilitá-los com facilidade. Em seguida, vamos ao editor gráfico e fazer o movimento se mover forma rápida, ajustando a influência da velocidade para Eu acho que parece bom. Agora podemos voltar à linha do tempo. Antes de prosseguir, vamos começar a última bolha pré-composição a partir da segunda nona, exatamente. Incrível. Então, com isso feito, criamos uma boa animação de fluxo de demonstração de uma conversa de bate-papo. Nesse ponto, podemos salvar o projeto e continuar avançando para a próxima etapa. Nesse ponto, também podemos garantir que todas as nossas camadas e pré-composições na linha do tempo sejam reduzidas para que possamos obter a cena com a melhor qualidade Ótimo. Então, agora vou salvar o projeto mais uma vez. E vamos ao início da linha do tempo e ver toda a animação que criamos até agora Percebi que na área inferior esquerda das caixas de avatar, temos algumas camadas que não pertencem a ela. Estou falando sobre esse. Talvez seja uma camada que esquecemos de excluir nas etapas anteriores Vamos encontrar essa camada na pilha e tentar entender o que é Vejo agora que é uma camada de texto que pertencia ao último balão de mensagem cinza do design original Substituímos essas camadas por uma pré-composição que inclui nossas camadas personalizadas internas Isso significa que não precisamos mais dessa camada aqui. O mesmo vale para essa camada. É a camada temporal do design original. Também não precisamos disso, pois já o incluímos na pré-composição É por isso que eu sempre verifico a animação depois de cada passo que eu faço. E eu sugiro que você faça o mesmo. Ao lidar com muitas camadas, é sempre uma boa ideia verificar a nós mesmos. Mesmo que tenhamos 100% de certeza de que fizemos tudo perfeitamente. É melhor encontrar o problema relevante do que a descoberta do cliente. Tudo bem. Então, agora, com tudo isso dito, vamos conferir essa animação juntos na composição principal. Voltaremos a essa pré-competição mais tarde para adicionar os retoques finais Por enquanto, é importante verificar como fica junto com a narração Entre no sistema de mensagens integrado onde todas as suas conversas são organizadas por contato. Envie um lembrete rápido ou compartilhe uma atualização instantaneamente. E sim, o compartilhamento de arquivos é instantâneo. E sim, compartilhamento instantâneo. E sim, compartilhar f. E sim, compartilhar. E sim. Tudo bem. Então, acho que estamos bem com o encerramento da animação de fluxo de demonstração com a narração Podemos ajustá-lo um pouco mais tarde, se necessário. Mas, por enquanto, quero continuar animando a cena. Precisamos criar uma introdução Otro para a cena. E também precisamos criar alguns movimentos de câmera para que os espectadores se concentrem nas seções relevantes na tela da interface do usuário. Também precisaremos adicionar o texto que precisa ser apresentado durante a animação do fluxo de demonstração. Somente depois disso, começaremos a trabalhar na próxima animação de fluxo de demonstração que podemos ver aqui na placa de vídeo Por enquanto, vamos nos concentrar em criar os movimentos da câmera e adicionar as linhas de texto do roteiro à cena. Mas antes de mais nada, não vamos esquecer de ativar a pré-composição do painel principal que temos na primeira tela de interface desta animação de fluxo de demonstração E com isso feito, agora podemos ir para a composição da cena principal e começar a planejar quais devem ser os movimentos da câmera Primeiro, vamos reduzir essa pré-composição para que possamos ver todas as camadas de colapso internas em alta qualidade aqui também E agora, antes de animar essa pré-composição para obter alguns bons movimentos de câmera, vamos primeiro adicionar o texto que precisa ser a cena Para isso, podemos ir até a placa de vídeo e ver isso. Como você pode ver, essa cena longa inclui um texto muito longo. No nosso caso, podemos dividir o texto em algumas partes, cada uma mostrada de acordo com o que está acontecendo na animação do fluxo de demonstração. Com isso dito, vamos até o roteiro e copiamos a primeira parte do texto que precisa ser mostrada na cena. Agora, vamos voltar ao projeto e colar o texto. Acabei de notar que devemos primeiro copiar uma camada de texto de outra cena com texto dentro dela. Dessa forma, será mais fácil colar o novo texto na nova cena. Vamos entrar na cena seis e copiar a camada de texto daqui. Agora vamos para a cena sete e cole essa camada aqui. E agora vamos ao script mais uma vez e copiemos o texto. Ótimo. Agora vamos voltar ao projeto. Clique duas vezes na camada de texto e cole o texto copiado do script Tudo bem. E agora, vamos dividir essa camada de texto no momento em que chegarmos à segunda parte da animação de demonstração, porque aqui adicionaremos a segunda parte do texto principal dessa cena do script. Então, vamos voltar ao script e copiar a segunda parte do texto principal, de volta ao projeto. Vamos agora colar o texto e expandir essa camada. Ótimo. Agora temos o texto da primeira parte da animação do fluxo de demonstração e da segunda parte. E agora vamos parar no momento em que a terceira e última parte da animação de demonstração está acontecendo, que é na segunda oitava, e dividir a camada de texto neste momento. Então vamos até o roteiro e copiamos a última parte do texto que temos nessa cena. De volta ao projeto. Vamos colar o texto. E vou deletar o ponto no final do texto. Tudo bem, agora podemos estender um pouco essa camada e salvar o projeto antes de passar para a próxima etapa. Nossa próxima etapa será criar a animação de introdução para essa cena e também criar os movimentos da câmera Para começar, vamos primeiro encontrar a escala correta e a posição correta para a pré-composição da tela da interface do usuário no início da animação Você pode usar a grade de ação segura para garantir que está colocando a pré-composição no centro da moldura Tudo bem? Então, acho que estamos bem agora com a escala e a posição da pré-composição Então, agora vamos ficar na segunda e criar um quadro-chave para a propriedade de escala aqui Agora, vamos ao início da linha do tempo e ampliaremos a pré-composição, para que tenhamos uma boa animação de redução de zoom para OK. E agora vamos abrir a propriedade position e criar um quadro-chave com o valor atual Vamos levar esse quadro-chave até o final da animação de introdução, pois queremos que a pré-composição seja colocada E agora, para a primeira posição no início da introdução, devemos ajustar a posição da pré-composição para ficar um pouco mais Então, neste momento, podemos mover a pré-composição um pouco para a direita OK. Então, com isso feito, criamos uma boa animação de introdução Em seguida, vamos ver o que está acontecendo na animação do fluxo de demonstração e tentar entender quais ângulos podemos criar para melhor se adequar ao que é mostrado na tela da interface do usuário durante a animação do fluxo de demonstração. Também precisamos pensar no momento em que devemos começar a mudar os ângulos. Por exemplo, nesse caso, não quero que o ângulo mude até a segunda parte da demonstração, a animação, começar. Então isso significa que até a segunda segunda , nada deve mudar. Portanto, criarei quadros-chave aqui com os valores atuais da posição nas propriedades da escala E agora podemos ir para a terceira posição e alterar a escala e a posição da pré-composição de acordo com o que está acontecendo na animação Nesse ponto, o painel principal da tela da interface do usuário desaparece e estamos vendo apenas a seção de conversas Portanto, neste momento, vamos mover essa pré-composição para a esquerda para que possamos vê-la no centro do quadro Agora, vamos também tentar escalar 22. Criando a cena 8 - Demonstração de animação arraste e solte: Volte. Nesta lição, começaremos a trabalhar na próxima cena. Mas antes disso, vamos organizar nosso painel de projetos. Vamos colocar essas três pré-composições na pasta de pré-composição. Tudo bem. E agora vamos criar uma nova pré-composição para a nova cena Podemos chamar isso de cena oito. Verifique se está em full HD e se o resto das configurações estão corretas. Vamos agora fechar todas as pré-composições que temos aqui. Tudo bem. E agora vamos entrar na placa de vídeo e ver o que precisamos fazer Nesta cena, criaremos uma animação de fluxo de demonstração de arrastar e soltar. Vamos começar entendendo qual deve ser a duração da cena. Deve começar por volta do segundo 53 e terminar por volta de 1 minuto e 1 segundo. Isso significa que temos cerca de 8 segundos. Incrível. Então, com isso em mente, vamos encontrar a tela de interface de usuário relevante que vamos animar nesta cena Ótimo. Então aqui está. Vamos agora acessar a nova composição de cena e arrastar a tela da interface do navegador para dentro dela E agora eu quero adotar uma abordagem um pouco diferente do fluxo de trabalho de animação que fizemos até agora. Até agora, primeiro animamos a animação inicial de cada parte, depois criamos a introdução e o Outro, depois criamos os movimentos da câmera e depois ajustamos a animação Desta vez, quero que não trabalhemos nessa abordagem passo a passo. Desta vez, quero guiá-lo com uma abordagem em que trabalhamos em todas as etapas juntos. Quero que você experimente as duas abordagens para que possa entender bem o que funciona melhor para você. Além disso, você entende que às vezes é ainda melhor trabalhar em todas as etapas simultaneamente. OK. Então, com isso dito, em vez de começar com a primeira parte do fluxo de animação, vamos começar a trabalhar na introdução dessa cena Para isso, vamos voltar à composição principal e ver o outtro da última cena Temos uma boa animação de zoom out. Meu objetivo é criar uma transição bacana de match cut. Portanto, vamos criar o mesmo movimento para a introdução da nova cena e da última Então, podemos cronometrar o movimento para obter essa transição suave de corte de fósforo. Com isso em mente, vamos voltar à nova cena e começar a criar a introdução Primeiro, podemos reduzir essa pré-composição. Em seguida, vamos ampliar a linha do tempo e usar as propriedades de posição e escala para criar uma animação de redução de zoom de 1 segundo Como queremos que a pré-composição tenha a aparência e seja colocada onde está agora, após a animação de introdução, precisamos criar um quadro-chave para as propriedades relevantes na Em seguida, precisamos ir ao início da linha do tempo e ajustar a escala e a posição para obter um bom movimento de redução do zoom Vamos abrir a grade de ação segura para ver o centro do quadro. Agora, vamos encontrar uma boa posição para a pré-composição neste momento Não quero posicionar a cena de acordo com o painel pop-up porque neste momento, não a vemos. Veremos mais tarde na animação. Então, vamos entrar na pré-composição e desativar as camadas pop-up por enquanto Tudo bem, de volta à cena principal. Vamos continuar ajustando a pré-composição. Estou tentando colocar a pré-composição as caixas de listagem de arquivos fiquem perfeitamente centralizadas no quadro Tudo bem? Eu acho que está tudo bem. Eu acho que isso é bom o suficiente. Agora, vamos ajustar a velocidade dos quadros-chave para obter um bom movimento rápido Isso significa que podemos mover as alças para ver a influência em torno de 95%. Acho que o movimento parece ótimo, mas talvez possamos ajustar a posição da pré-composição no início da linha do Será um pouco mais interessante se a animação Zoom out começar com o nome da tela da interface do usuário. Vou ficar na primeira posição dos quadros-chave e só então ajustar a posição da pré-composição neste momento. Vamos colocá-lo aqui. Vamos verificar como isso parece agora. Acho que parece melhor por enquanto. Então, o que fizemos agora foi focar muito do nosso tempo em ajustar a animação de introdução Mas é bom fazer isso? Quero mostrar esse tipo de fluxo de trabalho para que você possa responder a essa pergunta por si mesmo. Mais tarde na lição, você poderá respondê-la. Porque durante a animação, podemos mudar essa animação de introdução que passamos tanto tempo aperfeiçoando agora Talvez passar esse tempo nesse ponto do processo não tenha sido uma boa escolha. Mais sobre isso mais tarde, por enquanto, vamos continuar trabalhando. Tudo bem. Então, agora vamos entrar na tela de interface do usuário do navegador antes da composição e começar a prepará-la para a animação do fluxo de demonstração Primeiro, podemos ativar as camadas pop-up e depois marcá-las com uma cor diferente. Em seguida, podemos reduzir todas as camadas que temos aqui para obtê-las na resolução mais alta. Feito isso, vamos começar a criar a primeira parte de animação para a animação de fluxo de demonstração. Agora podemos desativar as camadas pop-up e, em seguida, marcar a camada de sombra com uma cor diferente. E agora vamos tentar entender o que deve ser nossa primeira parte de animação. No nosso caso, precisamos criar uma animação em que adicionemos um arquivo adicional à lista de arquivos na seção principal dessa tela da interface do usuário. E antes que tudo isso aconteça, precisamos criar uma animação de arrastar e soltar. A animação de arrastar e soltar acontecerá depois que o painel pop-up entrar na cena. Isso significa que também precisamos criar algum tipo de animação de clique para acionar a introdução do painel pop-up No nosso caso, podemos acionar isso criando uma animação de clique para o botão de anúncio que temos aqui na seção de cabeçalho. Ótimo. Agora temos uma ideia das diferentes partes da animação que precisamos criar aqui. Com isso em mente, entendo que a primeira coisa que posso fazer agora é pré-compor as camadas do painel pop-up em uma Dessa forma, será muito mais fácil criar uma animação de introdução para ela e sincronizá-la com o resto das camadas Além disso, será muito mais conveniente criar microanimações dentro do painel pop-up da interface Mova a nova pré-composição para fora da pasta da tela antes de continuar. E agora podemos começar a trabalhar na primeira parte de animação desse fluxo de demonstração, que é a animação de cliques no botão Adicionar e a introdução do painel pop-up Como sabemos que a animação de introdução da cena termina na segunda, isso significa que essa parte da animação deve começar na segunda. E não antes disso. Isso significa que podemos mover o pop-up e a camada de sombra para começar da segunda segunda. E do segundo ao segundo segundo, criaremos uma animação de clique no botão do anúncio na seção de cabeçalho. Então, agora, em vez de primeiro criar a animação de cliques, vamos continuar trabalhando com nossa nova abordagem de não manter o fluxo de trabalho passo a passo. Em vez de focar primeiro na animação do clique, focaremos no movimento da câmera. No nosso caso, em vez de animar uma câmera, continuaremos ajustando a posição e escalando a Com isso em mente, vamos agora ficar na segunda posição e posicionar a tela da interface do usuário antes da composição forma que possamos ver o botão um pouco melhor Precisamos que a atenção do espectador se concentre nessa área. Ok, agora, neste momento, após o Zoom e a animação, podemos criar a animação de clique para o botão. A animação do clique durará dez quadros. Então, vamos ficar aqui e , em seguida, inserir a pré-composição para mover o tempo do painel pop-up para começar a partir desse momento , que são os segundos dois e dez quadros Feito isso, vamos voltar aos dois segundos e criar a animação de cliques. Vamos primeiro selecionar a camada do botão e colocá-la acima de todas as primeiras camadas da parte da animação. E agora, em vez de animar essa camada, podemos usar a pré-composição de animação de botão que usamos anteriormente no projeto Uma vez encontrado, vamos duplicar essa pré-composição e ajustar o nome para se adequar à nossa cena Agora, segure Alt ou Option no Mac e arraste-a para a camada do botão na linha do tempo para substituí-la pela pré-composição do botão Depois disso, vamos ajustar o tamanho da pré-composição para se adequar ao design da tela da interface do usuário Em seguida, vamos inserir o botão de pré-composição e ajustar o texto. Incrível. Agora, precisamos ter certeza de que estamos no momento correto para que a animação do clique aconteça. Em seguida, podemos inserir o botão precomp e arrastar os quadros-chave até esse momento Tudo bem. Agora temos a animação de cliques pronta e estamos prontos para passar para o painel pop-up. Precisamos do pop-up para entrar na cena logo após a animação do clique. Vamos começar a partir dos segundos dois e cinco quadros. Para a animação de introdução, vamos usar a propriedade de escala para criar um bom efeito de destaque para essa Vamos fazer com que essa animação dure por 1 segundo. Ótimo. Depois de concluir a animação pop-up, agora podemos criar uma animação para a camada de sombra. Para isso, podemos usar a animação de sombras desfocadas que criamos em uma das cenas anteriores Para descobrir em qual cena estava, usarei a barra de pesquisa do painel do projeto. A sombra da tela oito não é o que precisamos, pois é a camada que vemos agora em nossa cena. O que precisamos verificar é a sombra da tela quatro. Tudo bem, clique nele e escolha revelar na composição. Dessa forma, o After Effects abrirá a composição com essa camada interna Aqui temos essa camada já inimiga. Agora podemos selecionar a camada de desfoque e sombra a partir daqui e copiá-la e colá-la em nossa nova cena Vamos colá-la acima da camada de sombra que temos atualmente e pressionar a tecla de colchete esquerdo para alinhá-la aqui Agora podemos excluir a camada de sombra antiga. Ótimo. Agora, vamos garantir que as novas camadas que trouxemos se encaixem no design da nossa tela de interface de usuário nesta cena. Como você pode ver, as duas camadas foram colocadas na mesma posição em que estavam na cena da qual foram copiadas Isso significa que precisamos ajustá-los um pouco. Então, vamos fazer isso rapidamente. Ok, agora vamos marcar essas duas camadas em roxo e abrir seus quadros-chave para verificar se a animação se encaixa na introdução do painel pop-up Vamos ver como isso parece. Acho que podemos começar essa parte da animação um pouco mais tarde. Vamos arrastar essas três camadas para começar nos segundos dois e dez quadros. Tudo bem, isso parece bom por enquanto. Antes de passar para a próxima etapa, vamos salvar o projeto para garantir o progresso que fizemos até agora. Ótimo. Agora, em vez de ir direto para a próxima parte da animação, vamos seguir nossa nova abordagem e dedicar algum tempo para finalizar e ajustar essa parte da animação Podemos começar ajustando o movimento da animação pop-up Vamos definir a velocidade para 85% e ver como fica. Eu acho que está tudo bem. Agora, vamos voltar à cena principal e ajustar o ângulo da câmera no momento em que o painel pop-up está aparecendo. Essa mudança no ângulo da câmera deve acontecer na terceira segunda. Então, vamos ficar aqui e ajustar a posição e as propriedades de escala da pré-composição da tela Por enquanto, vamos copiar os valores anteriores antes do Zoom e da animação e colá-los aqui. Agora, nosso próximo movimento de câmera deve ser para o lado esquerdo, já que precisamos criar a animação de arrastar e soltar. Isso significa que nos moveremos para a esquerda e o cursor trará um arquivo do lado direito e o soltará na seção do painel pop-up. Com isso em mente, podemos tornar a cena mais interessante ampliando um pouco mais o painel pop-up, também porque queremos que o espectador preste atenção a ela neste momento Então, vamos brincar com os valores de escala e posição até obtermos uma boa aparência da cena. Meu objetivo é criar o painel pop-up localizado no centro da moldura. Tudo bem. Acho que parece bom, e agora devemos começar a preparar o próximo movimento da câmera. Hora. Como queremos adicionar uma animação de arrastar e soltar, precisamos mover a pré-composição para a esquerda para que tenhamos espaço para pegar o arquivo e soltá-lo dentro do painel pop-up Vamos decidir que essa animação levará 2 segundos para ser concluída. Por quê? 2 segundos? Porque haverá muita coisa acontecendo nessa parte da animação, e eu não quero que pareça muito rápida. Tudo bem? Então, vamos ficar no segundo quinto e mover a pré-composição para a esquerda Portanto, temos espaço livre no lado direito. Dessa forma, criaremos a ilusão de que a câmera se move para a direita, onde o arquivo está localizado, antes de pegá-lo com o cursor e arrastá-lo e soltá-lo dentro do painel pop-a Agora, vamos avançar 1 segundo no tempo e copiar e colar o quadro-chave da posição anterior aqui porque queremos que a pré-composição retorne à sua posição anterior Isso significa que, neste momento, já teremos arrastado o arquivo para dentro do painel pop-up Para tornar a animação um pouco mais interessante, podemos criar uma microanimação dentro do painel pop-up. Meu objetivo é criar algum tipo de microanimação que mostre o painel pop-up reagindo ao arquivo descartado Em breve, você verá o que quero dizer. Por enquanto, vamos ficar neste momento e entrar na pré-composição do navegador E a partir desse exato momento, criaremos essa microanimação dentro da pré-composição pop-up Então, primeiro, vamos inseri-lo. Aqui, podemos criar uma animação pop-up para o ícone da pasta que temos Também podemos criar uma boa animação rotativa para o traçado pontilhado que temos aqui, mas falaremos mais sobre isso mais tarde Por enquanto, vamos nos concentrar no ícone da pasta. Primeiro, vamos criar um quadro-chave para a propriedade de escala neste momento com o valor atual Em seguida, vamos decidir se essa animação pop-up durará dez quadros e criaremos outro quadro-chave aqui com o mesmo valor Agora vamos até o meio dessa animação e aumentemos a escala da camada. Podemos configurá-lo para 200. Vamos ver como isso parece. Acho que podemos escalá-lo um pouco mais. Vamos tentar 300. Ótimo. Isso é melhor. Agora, vamos ajustar a velocidade dos quadros-chave para 85% para obter um movimento um pouco mais interessante Vamos ver como isso parece agora. Na minha opinião, é super rápido. Então, vamos fazer essa animação durar exatamente 1 segundo. Isso significa que se começar em 3 segundos e 20 quadros , precisará terminar em 4 segundos e 20 quadros. Vamos pré-visualizá-lo novamente. Agora, acho que parece muito lento. Então, vamos fazer essa animação durar até 4 segundos e dez quadros e verificá-la mais uma vez. Incrível. Acho que acertamos dessa vez. Agora, para tornar a animação emergente um pouco mais interessante, vamos ficar no início dessa animação e colocar o ponto de ancoragem na área central inferior da camada Isso fará com que o ícone da pasta apareça de forma mais dinâmica. Na minha opinião. Além disso, agora o ícone da pasta não colide com o texto abaixo dela Feito isso, vamos passar para a próxima microanimação que podemos criar aqui. Desta vez, vamos fazer o traçado pontilhado girar. A maneira mais fácil de fazer isso é recriar o retângulo do zero Então, vamos selecionar a ferramenta retângulo, garantir que nenhuma camada esteja selecionada e criar um novo retângulo com aproximadamente o mesmo tamanho do retângulo original no design Para a cor, vamos mudá-la para uma cor de preenchimento normal e, por enquanto, defini-la como cinza. Agora, crie o retângulo e ajuste seu tamanho. Para isso, vamos usar a propriedade size. Primeiro, vou desmarcar as proporções restritas e depois ajustar os valores separadamente Também podemos mover a forma manualmente até que ela se encaixe no design original. Incrível. Agora, vamos ajustar os cantos arredondados da forma para que pareça mais próxima do design original. Ótimo. Feito isso, vamos agora lidar com o traçado que precisa estar nessa camada. Para a cor, podemos provar o roxo que vemos no traçado ou no ícone da pasta. Para o peso do traçado, podemos defini-lo como dois. Em seguida, precisamos garantir que esse traçado se pareça com o design original. Isso significa que precisamos que apareça como um traço pontilhado. Para isso, abra o menu de traços dentro da camada e adicione traços Para girar o traçado, usaremos a propriedade offset Mas antes disso, vamos ajustar o valor do traço para corresponder ao design Podemos configurá-lo para cinco. Vamos agora verificar se ele se parece com o design original. Sim, acho que está ótimo. Por enquanto, vamos deixar essa camada desativada para que possamos uma amostra da cor cinza do design original para colorir o preenchimento da nossa nova forma. Tudo bem. O design parece bom e agora estamos prontos para animá-lo Como eu disse anteriormente, usaremos a propriedade offset para isso Mas, em vez de criar manualmente quadros-chave para a rotação, vamos usar uma expressão de tempo simples para fazê-la girar infinitamente sem Para isso, mantenha pressionada a tecla Alt ou Option no Mac e clique no cronômetro da propriedade offset Agora, dentro da caixa de expressão, digite T asterisk -100. Feito isso, o traçado agora gira infinitamente para a direita sem que criemos quadros-chave manualmente Caso pareça muito rápido, você pode diminuir o valor dentro da expressão. Vamos configurá-lo para -50 e ver como fica. Incrível. Eu acho que parece muito bom. Feito isso, agora podemos desativar a camada retangular original E depois disso, podemos enviar essa camada na linha do tempo, já que não precisamos mais dela Finalmente, vamos colocar nossa nova camada de forma acima da última camada. Tudo bem. E agora, depois de terminarmos a microanimação dentro do painel pop-up, podemos fazer com que essa animação pareça ainda mais interessante adicionando uma microanimação adicional pareça ainda mais interessante adicionando uma microanimação adicional ao painel pop-up externo da cena. Deixe-me mostrar o que quero dizer. Primeiro, vamos ver o momento em que essa animação começa. Agora, vamos voltar ao prec do navegador. Uma vez aqui, podemos criar uma animação em escala adicional para a pré-composição pop-up, a partir desse momento Então, crie o primeiro quadro-chave aqui. Agora, precisamos sincronizar essa animação com a animação que acontece dentro da pré-composição pop-up Se não tiver certeza de onde termina, você pode entrar na pré-composição e ficar no momento em que a animação Em seguida, volte para a pré-composição do navegador, crie outros quadros-chave nesse momento e, em seguida, fique no meio dessa animação para reduzir a pré-composição pop-up Agora podemos ajustar a velocidade para 85 para corresponder ao movimento dentro da pré-composição pop-up E com isso, criamos uma animação de reação bem legal para o painel pop-up da interface do usuário. Isso ficará muito mais legal quando adicionarmos a animação de arrastar e soltar Mas, por enquanto, vamos nos concentrar em começar a próxima parte da animação. Quando precisamos mostrar a lista principal de arquivos com o novo arquivo que foi arrastado e soltado, para isso, precisamos criar uma animação externa para a pré-composição pop-up que acontece logo após a Vamos ficar nos segundos sete e 20 quadros e definir a escala para zero neste momento. Podemos então ir ao editor gráfico e ajustar o movimento, para que ele comece devagar e acelere até o final. Depois disso, vamos também criar uma animação externa para o desfoque na sombra que temos aqui Precisamos sincronizar essa animação com a animação externa do precom pop-up Para fazer isso rapidamente, podemos ficar neste momento, copiar os primeiros quadros-chave de ambas as camadas e colá-los aqui Em seguida, clique com o botão direito do mouse, vá para o Assistente de quadros-chave e escolha quadros-chave reversos Vamos pré-visualizar essa animação algumas vezes para ver como ela se sente. Incrível. Eu acho que parece muito bom. Agora estamos prontos para começar a animar a próxima parte, onde adicionamos outro arquivo à lista para finalizar nossa animação de fluxo de demonstração para essa cena Como eu já sabia queria criar esse tipo de animação. Ao criar o storyboard no Illustrator, ao preparar essa tela de interface do usuário para animação, certifiquei-me de ter um design de caixa de arquivo na lista separado em camadas Dessa forma, agora podemos encontrar essas camadas na linha do tempo, selecioná-las todas e duplicá-las Porque eu sabia que o arquivo adicionado aqui na parte de arrastar e soltar seria um novo arquivo JPEG ou PNG Eu me certifiquei de que as camadas de design desse arquivo PNG também estivessem separadas. Então, vamos selecionar todas as camadas relacionadas a essa caixa de arquivo e pressionar Ctrl mais D para duplicá-las Agora vamos movê-los para cima para que fiquem em uma pilha. Uma vez feito isso, vamos pré-compor todas essas camadas e chamar essa tela de pré-composição de oito painel dois Ótimo. Agora, usaremos essa pré-composição como a nova caixa de arquivo que aparece na lista de arquivos após a animação de arrastar e soltar Mas primeiro, precisamos ajustar o design dentro dessa pré-composição Vamos usar a região de interesse para cortar o tamanho dessa composição, já que ela é muito grande no momento Feito isso, agora vamos selecionar todos os elementos internos e colocá-los na camada da caixa branca. Dessa forma, podemos selecionar a camada da caixa branca, alinhá-la ao centro da composição e garantir que tudo esteja perfeitamente centralizado. OK. E agora vamos criar uma nova camada de texto com um nome de arquivo diferente. Para ter um fluxo agradável e contínuo da cena anterior, podemos chamar esse arquivo de ponto de referência JPEG Isso funciona porque, na cena anterior, a conversa era sobre o envio de uma referência para a tarefa que estava sendo discutida. Depois de ajustar o tamanho e a posição do texto, podemos desativar a camada de texto original Vamos deixar o resto das informações como estão e seguir em frente. Agora, vamos voltar ao navegador, à interface de usuário, uma tela, fechar nossa nova pré-composição e encontrar um bom lugar para ela na lista Vamos ampliar e garantir que o espaçamento entre as caixas de arquivo seja consistente com o resto da lista Feito isso, vamos começar a criar a animação decrescente para todas as caixas de arquivo na lista. Mas antes de fazermos isso, vamos lidar com a caixa do arquivo PNG que todos os elementos estão em camadas separadas. Certifique-se de selecionar todos os objetos relacionados para esse arquivo e colocá-los na caixa branca principal desse design de arquivo. Ótimo. Agora vamos marcar todas essas camadas em laranja, para que saibamos que elas pertencem a uma seção. Em seguida, podemos selecionar todas as camadas relacionadas a esse arquivo, exceto a camada da caixa branca, e enviá-las na linha do tempo Dessa forma, será muito mais fácil criar a animação decrescente para as caixas de arquivo na lista. E para evitar qualquer interferência, vamos bloquear as camadas de desfoque e sombra Bem. Tudo bem, então, agora vamos começar a selecionar todas as camadas da caixa de arquivo. Para esse arquivo, certifique-se de não selecionar um de seus elementos que estejam em uma camada separada. Em vez disso, selecione a caixa branca desse arquivo. Agora, depois que todas as cinco camadas estiverem selecionadas, vamos encontrar o momento certo para iniciar essa animação. No nosso caso, ele pode começar logo após o funil pop-up terminar sua animação de introdução, que está nos segundos sete e Então, enquanto estamos aqui, vamos criar os primeiros quadros-chave para a posição Agora vamos avançar 1 segundo. A linha do tempo e reduza todas as camadas selecionadas. Precisamos garantir que nossa nova pré-composição seja colocada exatamente onde está a primeira caixa de arquivo Portanto, antes de arrastar as camadas para baixo, vamos pressionar Control ou Command R para abrir as réguas e, em seguida, criar uma guia para que saibamos o quanto precisamos arrastar as camadas para Agora podemos desligar as réguas e começar a arrastar as camadas Ótimo. E agora vamos facilitar os quadros-chave e ajustar o movimento no editor gráfico Vamos fazer com que o movimento comece rápido e diminua até o final. Vamos ver como isso parece. Tudo bem. Acho que está tudo bem por enquanto. Não precisamos mais da guia que criamos, então vamos removê-la da moldura. Tudo bem. E agora vamos lidar com a área superior na seção da lista porque precisamos ocultar a nova caixa de arquivo nessa área. Para isso, podemos encontrar o gradiente branco que criamos na cena anterior e depois copiá-lo de lá e colá-lo em nossa nova cena Então, vamos abrir a cena sete e depois inserir as mensagens PreComp Agora vamos encontrar a camada branca em forma de gradiente que criamos aqui e copiá-la De volta à nova cena antes de colar a camada, vamos primeiro lidar com a ordem da lista de arquivos que temos aqui O que quero dizer com isso é que quero colocar o novo arquivo pré-composição que criamos no lugar certo na pilha de camadas Talvez precisemos colocá-lo aqui. Não. Portanto, de acordo com a ordem das camadas, essa é a área da caixa de arquivo inferior no design. Isso significa que precisamos mover a pré-composição para antes da camada de arquivo, que é o primeiro arquivo na lista no design No nosso caso, precisamos colocá-lo aqui. Dessa forma, como você pode ver, quando estou selecionando cada camada, temos uma ordem cronológica Estou fazendo isso porque será um pouco mais fácil saber onde colocar a camada de gradiente branco No nosso caso, o gradiente branco deve estar acima todas as camadas da caixa de arquivo porque precisávamos ocultar a caixa de arquivo superior Então, vou selecionar essa camada para colar o gradiente branco acima dela Agora vamos trazer essa camada para o início da linha do tempo e depois ajustar seu design para caber na nossa seção de lista Primeiro, vou trazê-lo para o centro da seção da lista e depois ajustarei a largura dessa forma. Vamos permanecer um pouco na pré-visualização e ajustar um pouco mais a posição. Tudo bem. Portanto, agora o gradiente branco está ocultando a caixa superior do arquivo, mas também está ocultando outra camada que não precisa ser ocultada Deixe-me mostrar o que quero dizer. Se agora desativarmos o gradiente branco e depois também desativarmos a primeira caixa de arquivo na lista, veremos que há uma seção aqui com algum texto Essa pequena seção precisa ser vista. Portanto, precisamos encontrar essa camada no painel de camadas e, em seguida, movê-la acima da camada em forma de gradiente branco. Ótimo. E agora podemos ativar novamente todas as camadas. E, como você pode ver, agora temos apenas a área certa oculta. Feito isso, agora podemos voltar e avançar na linha do tempo e ver a aparência dessa seção Eu acho que parece ótimo. Então, agora precisamos fazer o mesmo para a parte inferior desta seção. Nosso objetivo agora é ocultar a caixa de arquivo inferior porque, como você pode ver, ela colide com os elementos de design dos números das páginas Então, primeiro, podemos duplicar a camada em forma de gradiente branco e depois arrastá-la para o lugar certo Em seguida, podemos clicar com o botão direito do mouse na camada e virá-la verticalmente Agora vamos ver como isso fica durante a animação e tentar ajustar sua posição, se necessário. No meu caso, preciso abaixar um pouco mais a camada. Incrível. Agora tudo parece bem e estamos prontos para passar para a próxima etapa. Na próxima etapa, quero que o movimento descendente das caixas de arquivo tenha um pequeno atraso na animação. Quero que a primeira caixa de arquivo na lista comece a ser movida primeiro e, em seguida, o restante das caixas de arquivo se mova de acordo. Isso significa que agora precisamos atrasar todos os quadros-chave que criamos para a propriedade de posição dessas camadas Nesse caso, para obter um bom atraso, vamos criar um deslocamento de dois quadros entre os quadros-chave Para criar o atraso, usarei o novo recurso de compensação do After Effects E como eu quero que a primeira caixa de arquivo na lista seja movida primeiro, vou começar a selecionar os quadros-chave na camada inferior porque essa é a primeira camada na seção. Tudo bem. Então, agora vou manter pressionada a tecla Alt e o controle ou opção no comando no Mac e arrasto os quadros-chave para a direita até ver que a segunda camada está atingindo a posição do indicador de tempo Vamos ver como isso parece. Incrível. Eu acho que parece ótimo. E agora vamos salvar o projeto antes de prosseguirmos. Tudo bem. Então, agora vamos voltar à composição principal e ver o que precisamos fazer a seguir Depois da parte da animação do fluxo de demonstração em que arrastamos e soltamos um novo arquivo e, em seguida, vemos esse arquivo adicionado à lista, agora devemos diminuir o zoom para ver toda a tela da interface do usuário com a lista de arquivos atualizada, e essa animação de redução de zoom deve começar no sétimo segundo. Da segunda sexta até a segunda sétima, não queremos nenhuma mudança nos movimentos da câmera porque esse será o momento em que a animação do arquivo Dragon Drop acontecerá. Então, agora, no segundo sétimo, precisamos criar quadros-chave de posição e escala com os valores atuais Só então vamos passar para a segunda oitava e criar a animação Zoom out. Para isso, podemos copiar os segundos quadros-chave na tela e colá-los nos segundos oito Dessa forma, agora temos a tela da interface do usuário mostrada totalmente no quadro. Agora, como criamos novos quadros-chave e copiamos e colamos outros quadros-chave, precisamos garantir que o movimento ainda seja consistente em toda E, como você pode ver, temos partes em que o movimento não é consistente. Precisamos que a velocidade de todos os quadros-chave seja em torno de 85% Mas, como você pode ver, em algumas partes, esse não é o caso. Estou mostrando isso porque quero que você veja que ajustar a velocidade dos quadros-chave antes de terminar a animação inicial é como trabalhar duas vezes Durante toda a animação da cena, criamos quadros-chave e os ajustamos imediatamente todas as vezes Aqui terminamos a animação e ainda precisamos ajustar os quadros-chave Portanto, sugiro primeiro terminar de criar os quadros-chave iniciais para toda a cena, deixando-os como quadros-chave lineares regulares Somente quando você terminar a animação inteira, você deve começar a ajustá-las. Essa é uma das desvantagens de trabalhar com a abordagem de animar cada parte sem seguir uma ordem cronológica Portanto, ao trabalhar em seu próximo projeto, faça a escolha certa do fluxo de trabalho e da abordagem que você está prestes a seguir. Tudo bem. Com isso dito, vamos voltar ao projeto e começar a ajustar o movimento da câmera mais uma vez, mas desta vez para todos os quadros-chave de uma só vez, porque queremos que o movimento seja consistente em toda a E faremos isso usando o painel de velocidade dos quadros-chave. Como não podemos ajustar propriedades diferentes ao mesmo tempo usando o painel de velocidade dos quadros-chave, primeiro precisamos selecionar todos os quadros-chave de posição e Vamos definir a velocidade para 85%. Então, vamos fazer o mesmo com os quadros-chave de escala. Feito isso, não vamos esquecer ajustar os primeiros quadros-chave dessa animação, pois essa é a animação de introdução dessa cena E como queremos ter uma boa combinação da cena anterior, devemos ajustar a velocidade dos quadros-chave nessa parte para cerca de 95%, porque queremos que o movimento aqui seja super rápido, para que a transição do corte de fósforo funcione perfeitamente Então, agora vamos para a composição principal e trazer a nova cena para a linha do tempo aqui e trabalhar na transição da cena anterior Mas antes disso, notei que não reduzimos a duração da cena anterior Acabamos de retirá-lo da composição principal. Com isso dito, vamos entrar na cena sete e reduzir o fluxo de trabalho para a segunda 11, que é 1 segundo após a animação externa. Eu prefiro ter 1 segundo de espaço livre, caso precise fazer alguns pequenos ajustes de tempo nas cenas. Tudo bem. Então, agora vamos trazer a cena oito para a linha do tempo e garantir que a transição do match cut esteja funcionando Para isso, precisamos cortar a cena oito do início até o ponto mais rápido do movimento de introdução Vamos começar a cena oito logo após cena sete e ver como fica a transição. Depois de assistir à animação algumas vezes, acho que o corte de fósforo não está bom A principal razão para isso é a posição de nossos elementos nas duas cenas. No nosso caso, são as telas da interface do usuário na cena sete e a tela da interface do usuário na cena oito. Vamos ver o que podemos fazer para essa transição de match cut pareça um pouco melhor. Primeiro, vamos tentar alterar a escala inicial e a posição da tela da interface na cena oito. Vamos tentar reduzi-lo um pouco e colocá-lo mais no centro, para que o movimento pareça mais uma animação direta de redução de zoom do que o movimento de redução de zoom que temos agora. Depois de ajustar a posição, certifique-se de que a velocidade não seja alterada Tudo bem? Vamos agora voltar para a composição principal e ver como isso fica Ok, acho que parece um pouco melhor. Vamos voltar à cena 81 mais vezes e tentar reduzir um pouco mais a pré-composição no início e depois alterar os quadros-chave da próxima escala para um número menor, talvez Muito pequeno. Vamos tentar 90. Vamos voltar à composição principal mais uma vez e ver isso algumas vezes para sentir sua aparência Eu ainda não amo a aparência do corte de fósforo. Nesse caso, podemos alterar totalmente o movimento do corte de partida de uma animação de redução de zoom para uma animação panorâmica. Deixe-me mostrar o que quero dizer. Primeiro, precisamos lidar com a animação Otro na cena sete Uma vez aqui, vamos ficar no final dos quadros-chave Otro e excluir os quadros-chave da última posição Agora, vamos garantir que, neste momento, a escala permaneça a mesma do início da animação externa Para isso, podemos simplesmente copiar os quadros-chave de escala anteriores e colá-los aqui Ótimo. E agora, em vez de criar uma animação com zoom out, vamos arrastar a pré-composição para fora do quadro para obter um bom movimento panorâmico da câmera Não vamos esquecer de verificar se a velocidade permanece a mesma. Tudo bem. Então, agora, uma vez feito isso, vamos para a cena oito e aqui, crie a tela da interface do usuário, entre na cena pela parte inferior. Isso criará um movimento panorâmico da câmera. Mas antes de fazer isso, vamos trazer de volta a escala pré-composição da animação de introdução para 90 Então, vamos definir os quadros-chave da segunda escala para 90 e depois fazer o mesmo com o primeiro Agora, podemos derrubar essa pré-composição. Mas antes disso, vamos garantir que esteja perfeitamente alinhado com o centro da moldura Usar a ferramenta de alinhamento não colocará realmente no centro do quadro, pois, de acordo com o After Effects, ela já está no centro da cena porque olha diretamente para a posição da camada de ajuste dentro dessa pré-composição E ele analisa isso porque essa pré-composição está reduzida, que significa que o After Effects está lendo as informações internas das camadas dentro Com isso dito, agora precisamos usar as guias da grade de ação segura e alinhar essa pré-composição ao centro manualmente para a animação Tudo bem? Então, vamos movê-lo para a direita e depois movê-lo para baixo para fora do quadro. Vamos garantir que a velocidade não tenha mudado e agora podemos realmente excluir os quadros-chave da primeira escala porque são iguais aos da segunda. Tudo bem. E agora não vamos esquecer de ajustar também a posição da pré-composição para os quadros-chave da segunda posição 23. Criando o título final e a reversão da cena: Volte. Nesta lição, começaremos a trabalhar nas cenas finais desse projeto. Começaremos criando a cena de animação do título. Para tornar isso mais rápido, podemos usar a animação de título semelhante que criamos no início do vídeo Vamos duplicá-lo e ajustar a animação interna. E antes de fazermos tudo isso, vamos criar uma animação externa para a cena anterior Vamos entrar na cena oito e agora passar para a segunda nove. Desta vez, podemos fazer com que a tela da interface do usuário saia do quadro pelo lado esquerdo. Porque a animação de texto que entrará na cena depois dela terá um movimento da esquerda para a direita. Em breve, você entenderá o que quero dizer. Enquanto isso. Certifique-se de definir a velocidade dos dois últimos quadros-chave em cerca de 95% E depois disso, vamos recortar a linha do tempo 1 segundo após a animação tro Ótimo. E agora vamos ficar no meio da animação trô e, na composição principal, recortar a composição até esse momento Incrível. Agora, quando terminarmos a cena, vamos começar a criar a animação do título para a próxima cena. Para isso, vamos encontrar a primeira animação de título pré-composição que criamos Aqui está. É a primeira cena que criamos. Agora, como queremos ter a mesma animação para nossa nova pré-composição, vamos primeiro duplicar essa pré-composição do painel de camadas e trazê-la para o momento certo Vamos ver como isso parece. Ok. Então, por que continuar lutando? Lutando. Então, por que continuar lutando? Vá para um ponto. Ótimo. E agora precisamos fazer algumas mudanças na animação do título para caber no roteiro e na narração Portanto, não faremos as alterações dentro desta pré-composição. Agora precisamos encontrar essa pré-composição no painel do projeto para que possamos duplicá-la a partir daí Queremos duplicá-lo do painel Projeto porque queremos ter uma pré-composição completamente nova na qual possamos fazer alterações sem afetar a primeira Uma vez feito isso, vamos segurar a opção Alter e arrastar a nova pré-composição para a original na linha do tempo para alternar entre elas Dessa forma, salvamos todos os quadros-chave que criamos na pré-composição original, mas agora temos uma pré-composição completamente nova Que podemos fazer alterações internas sem afetar a original. Tudo bem Então, agora, com isso dito, vamos começar alterando o texto aqui. Para isso, vamos abrir o script e copiar o texto relevante. Volte ao projeto, cole o texto e, uma vez feito isso, vamos excluir a palavra lutando porque essa palavra deve ser animada de forma diferente. Vamos animá-lo como a palavra múltiplo. E faremos isso em um segundo. Por enquanto, vamos mudar o ponto de exclamação que temos aqui para um ponto de interrogação Incrível. E agora vamos excluir as camadas de texto não relevantes. Finalmente, vamos garantir que a máscara que temos nessa camada de texto se ajuste ao texto atual. Para isso, primeiro, vamos remover a máscara atual e depois criar uma nova. Dessa forma, ele se ajustará automaticamente ao texto atual. Ótimo. E agora, a próxima coisa que podemos fazer é ajustar a posição da palavra que está dividida em várias camadas, e podemos fazer isso facilmente movendo o objeto nulo, já que todas as letras estão associadas a ele Vamos colocá-lo em algum lugar por aqui por enquanto. Ok. E agora vamos ajustar as letras para que possamos obter a palavra relevante para essa cena. Nesse caso, ele precisa estar lutando. E como sabemos que a palavra com dificuldades tem mais letras do que múltiplas, será uma boa ideia separar as camadas de letras do nulo por enquanto, porque adicionaremos camadas de letras adicionais em um segundo, quais ajustaremos na animação Tudo bem Então, agora vamos ajustar as letras, clicar duas vezes em cada letra e alterá-la de acordo. Tudo bem E agora duplique a última camada e mova-a um quadro para frente para manter a animação offset Em seguida, altere-o para a letra relevante. Agora, vamos duplicar essa camada e repetir o mesmo processo Desta vez, mude a letra para G. Awesome. E agora, como temos mais letras nessa palavra, devemos ajustar a animação da posição para todas elas. Para fazer isso sem problemas, vamos primeiro fazer com que todas as camadas comecem exatamente do mesmo ponto no tempo. Mais tarde, vamos compensá-los mais uma vez. Por enquanto, vamos fazer com que todos os quadros-chave comecem do mesmo ponto no tempo mim, será muito mais fácil ajustar a animação da posição deles. Tudo bem. E agora vamos ajustar os quadros-chave da última posição para as novas letras Para isso, devemos primeiro ficar no último quadro-chave e só depois ajustar a posição Se você não conseguir se posicionar diretamente no quadro-chave, como no meu caso, não se preocupe É apenas uma pequena falha de software que ocorre após o reposicionamento de quadros-chave várias vezes Nesse caso, fique o mais próximo possível do quadro-chave e mova a camada Como você pode ver, um novo quadro-chave atualizado foi criado, mas não está alinhado com o resto dos mas não está alinhado com o resto dos quadros-chave. Não se preocupe com isso. Apenas certifique-se de não ter dois quadros-chave posição para a posição neste momento Por enquanto, vamos criar um novo guia e focar em alinhar as novas letras com o resto do texto Não se preocupe se o quadro-chave não estiver alinhado com os outros Em seguida, vamos mover a nova letra para a direita para reorganizar a posição do resto das letras Basicamente, o que estamos fazendo agora é ajustar os quadros-chave da última posição para as letras Feito isso, vamos colocar o objeto nulo no centro dessa palavra Ótimo. Agora podemos aproximar o primeiro texto. E agora vamos ficar no meio da animação das letras e ajustar sua posição neste momento também. Tudo bem. Depois de fazer isso, vamos revisar a animação e verificar se está tudo bem, como você pode ver. Durante o processo de reposicionamento dos quadros-chave da última posição que criei, quadros-chave desnecessários Se isso aconteceu com você também, vamos garantir que excluamos os quadros-chave antigos e deixemos os novos Ótimo. Então, quando terminarmos com isso, vamos garantir que nenhuma camada esteja selecionada e pressionar você para fechar todas elas. Agora vamos criar o atraso de um quadro que tivemos anteriormente para essa parte da animação. Incrível. Então, agora podemos ao momento em que todas as letras estão em seu lugar final e, em seguida, selecioná-las todas e transformá-las em nulo E agora também teremos o movimento de salto secundário que criamos para o nulo Podemos nos livrar do guia agora. E agora vamos lidar com a animação do ponto de interrogação. Primeiro, podemos atrasar um pouco essa animação na linha do tempo Como agora a animação das letras dura um pouco mais, podemos começar a animação do ponto de interrogação a partir da segunda. Ok, o momento parece bom, mas agora precisamos movê-lo para ser colocado ao lado do texto. Para isso, podemos criar um novo objeto nulo, apenas para usá-lo como um objeto móvel para as duas camadas que temos aqui Estou fazendo isso em vez de mover cada camada uma por uma. Tudo bem? Acho que podemos colocá-lo em algum lugar por aqui. Ótimo. Temos tudo posicionado no lugar certo E agora, antes de prosseguir, vamos ajustar o tamanho dessa composição usando a ferramenta de região de interesse Você pode abrir as configurações da composição e definir as dimensões para números arredondados. Não precisamos fazer isso, mas eu prefiro assim. O mais importante é garantir que as camadas estejam alinhadas ao centro da composição Como você pode ver no meu caso, eu tenho tudo alinhado. Caso você não tenha isso, você pode usar o método de objeto nulo para criar todas as camadas com o nulo e movê-lo para ajustar a posição de todas as camadas de uma vez. Tudo bem E agora, antes de prosseguir, vamos fazer um ajuste final. Vejo que a animação aqui começa do segundo em dez quadros. Vamos selecionar todas as camadas, exceto o primeiro texto, e fazer com essa animação comece a partir da segunda. Incrível. Agora, tenho certeza de que fizemos tudo aqui. Podemos mover o primeiro texto um pouco para a direita e pronto. Agora vamos voltar para a composição principal e ver o que temos, preste atenção na narração Nosso objetivo é garantir que ele se sincronize perfeitamente com a animação de texto Então, por que continuar lutando? Acesse onepoint.com e torne seu dia de trabalho mais fácil. Então, por que continuar lutando? Acesse onepoint.com e faça seu trabalho. Por que continuar lutando? Vá para um ponto. Continue lutando. Vá para um ponto. Tudo bem. Então, depois de assistir algumas vezes, vejo que precisamos ajustar o tempo. Mas antes de fazer isso, excluirei o último quadro-chave de posição que tenho aqui. Esse pequeno movimento é irrelevante para este texto. Foi mais relevante para a animação de texto anterior. Agora vamos mover dez quadros para trás e começar a cena a partir desse momento Incrível. Então, agora isso significa que precisamos ajustar o tempo da animação tro para a cena anterior. Portanto, enquanto estamos neste momento, vamos entrar na cena oito e garantir que a animação já termine nesse momento. Para fazer isso, precisamos entrar na tela da interface do usuário antes da composição. E, em primeiro lugar, certifique-se de que a animação externa termine na posição do indicador de tempo Então, selecionarei todos os quadros-chave das camadas do arquivo e garantirei que o último quadro-chave termine aqui Isso significa que agora também precisamos reajustar o tempo da parte anterior da animação Precisa terminar neste momento. Então, vamos ficar aqui e depois mover todos os quadros-chave da parte anterior da animação para terminar aqui. Incrível. Feito isso, não vamos esquecer a microanimação que acontece dentro da pré-composição pop-up Precisa começar a partir desse momento. Então, vamos entrar na pré-composição e mover os quadros-chave aqui. Está bem? Agora, como alteramos o tempo da parte final dessa animação de fluxo de demonstração, isso significa que também devemos ajustar o tempo dos movimentos da câmera na cena principal. Precisamos sincronizar a animação de arrastar e soltar com a animação externa do painel pop-up dentro dessa pré-composição Isso significa que a animação de arrastar e soltar deve terminar neste momento em que o painel pop-up inicia a animação externa Então, vamos ficar aqui e depois ir para a cena principal. E agora, certifique-se de ver todos os quadros-chave que temos aqui. Agora, selecione todos os quadros-chave da parte final e traga-os aqui para que a tela da interface do usuário já esteja no centro do quadro. Como você pode ver, dessa forma, sincronizamos tudo perfeitamente e é assim que você reajusta o tempo das animações de fluxo de demonstração Não há nada sofisticado ou complicado nisso. Tudo o que precisamos é um pouco de foco e compreensão de onde cada uma de nossas partes de animação começa e termina. Tudo bem? Então, agora, antes de voltar para a composição principal e assistir à animação mais uma vez, quero ajustar a posição final da camada do arquivo Eu não quero que ele esconda os objetos por trás dele. Quero ver a animação da pasta roxa. Incrível. Então, agora, depois de ajustar o tempo dentro dessa pré-composição, vamos ficar no meio da animação externa E enquanto estiver aqui, volte para a composição principal e recorte a cena oito antes da composição até agora, vamos ampliar e garantir que não tenhamos espaço vazio entre a cena oito e nove Ok. E agora vamos ver como isso parece. Um jeito. Então, por que continua lutando? Oi. Então, por que continuar lutando? Pensando bem, acho que não precisamos criar uma transição de match cut aqui. Vamos estender a cena oito antes da composição para obter uma simples panorâmica para a esquerda Acho que fica melhor nesse caso. Podemos entrar na cena oito e ver exatamente onde a animação Otro termina e, em seguida, recortar a pré-composição até aquele momento na composição principal A pintura para a transição à esquerda parece muito melhor. Podemos começar a Cena nove um pouco mais cedo. Vamos movê-la dez quadros para trás e assistir essa parte algumas vezes para ver como é. Então, por que continuar lutando? Lutando. Acesse one point.com Então, por que continuar lutando? Acesse onepoint.com. Então, por que continuar lutando? Acesse onepoint.com e faça o seu Alright. Eu acho que parece ótimo. E agora quero ter certeza de que a palavra luta será colocada no centro da moldura. Para isso, podemos primeiro abrir a grade de ação segura. E agora vamos ficar na última posição do quadro-chave dessa pré-composição e ajustá-la Então, a palavra será posicionada no centro. Incrível. Então, agora temos a letra G quase tocando o teto da moldura neste momento Vamos entrar na pré-composição e ajustar a animação dessa letra Primeiro, vamos selecionar essa camada e pressionar para ver todos os quadros-chave E agora vamos tentar ficar no meio dessa animação e ajustar a posição dessa camada. Não se preocupe se você não conseguir se posicionar exatamente nos quadros-chave. Basta ajustar a posição e, em seguida, removeremos o quadro-chave irrelevante Além disso, não se preocupe se você não conseguir colocar o novo quadro-chave alinhado exatamente com o resto dos Isso não será perceptível na animação. Incrível. Então, agora, vamos voltar à composição principal e, como você pode ver, tudo parece perfeitamente bem Feito isso, agora podemos salvar o projeto para garantir as alterações que fizemos até agora. Ótimo. Então, agora vamos continuar com a próxima cena. Para ver o que precisamos fazer a seguir, podemos acessar a placa de vídeo. Ok, agora precisamos criar a cena final para este projeto. Essa é a cena de chamada à ação que é muito comum nesses tipos de vídeos explicativos. Normalmente, nessa cena, precisamos apresentar o logotipo e algumas animações de call to action, como conferir nosso site ou clicar no link abaixo. Obviamente, ele precisa ser sincronizado com a narração. No nosso caso, nosso apelo à ação é promover o site e pedir ao espectador que o visite. Com isso dito, vamos voltar à composição principal e começar a preparar a cena Mas primeiro, vamos trazer essa camada do Illustrator para a pasta Assets Ok. E agora vamos pressionar Catrol ou Command N para criar uma nova composição. Podemos chamar isso de cena dez. Vamos garantir que a duração seja de 2 minutos antes de clicar em OK. Obviamente, mais tarde ajustaremos a duração. Incrível. Então, agora vamos começar projetando a cena. Podemos começar trazendo o logotipo para a cena. Para isso, podemos pesquisar o logotipo, pré-composição que temos no projeto, e depois trazê-lo para a linha do tempo Uma vez feito isso, vamos verificar o logotipo se encaixa na cena e reduzi-lo um pouco. Como você deve entender, precisamos ter algum espaço para o botão de call to action que precisa estar abaixo do logotipo. Incrível. E agora podemos começar a criar o botão de call to action. Para isso, podemos usar uma das nossas pré-composições de botões que criamos durante o projeto Vamos duplicar o último botão antes da composição e depois ajustar o nome CTA significa apelo à ação. Ótimo. Então, agora vamos trazê-lo para a cena e ajustar o design e o texto interno. Em primeiro lugar, vamos mudar o texto para o nome do site. Depois de terminar, vamos inserir as configurações da composição e ajustar a largura para caber no tamanho do botão. Ok. E agora vamos posicionar as duas pré-composições para que tenhamos uma composição agradável e equilibrada Podemos abaixar o botão e também abaixar o logotipo. Ótimo. Feito isso, podemos começar a animar a cena E a animação principal que precisa acontecer aqui é a introdução da esfera, que é nosso cursor no projeto, clicando no botão Para isso, vamos pesquisar a pré-composição do cursor no painel do projeto e, em seguida, arrastar essa pré-composição para a cena. E agora, para a animação, podemos começar a introdução do cursor na área superior da cena Vamos colocá-lo no centro verticalmente. Ok, isso é bom o suficiente. E agora vamos marcar essa pré-composição em amarelo e começar a animá-la Usaremos a propriedade position para isso. Então, vamos criar o primeiro quadro-chave no início da linha do tempo E agora vamos avançar 1 segundo e trazer a pré-composição aqui para o lado direito da cena Em seguida, vamos avançar 1 segundo e colocar a pré-composição em algum lugar na área do botão Podemos alinhá-lo verticalmente com a composição e, em seguida, aumentar o zoom e colocá-lo um Incrível. E agora vamos criar a animação de cliques para o cursor, que também será a animação externa dele Para isso, usaremos a propriedade de escala. Então, crie um quadro-chave aqui. Em seguida, vamos mover 20 quadros e definir a escala para zero. Ótimo. Agora, depois de criarmos o movimento inicial, podemos começar a ajustá-lo Primeiro, vamos começar ajustando o caminho usando a ferramenta Vertex Queremos ter um movimento bonito e arredondado para isso. Ótimo. Depois de ajustarmos o caminho, vamos agora lidar com o movimento. Primeiro, vamos facilitar os quadros-chave de posição. E então, no editor gráfico, vamos fazer a velocidade de introdução, 95%, porque queremos criar uma combinação da cena anterior E agora, neste momento, vamos desacelerar essa esfera movendo a alça para a direita. Não quero que pare completamente neste momento, então vou me certificar de transformar esse quadro-chave em um quadro-chave contínuo e seguida, garantir que a velocidade nessa parte não seja zero. Vamos ver como isso parece. Ótimo. Parece bom. Agora vamos lidar com os quadros-chave de escala. Para chamar a atenção do espectador para essa área, podemos ficar no meio da animação em escala e o cursor um pouco para que ele cresça antes de desaparecer Como você pode ver, ele chama mais atenção para o cursor neste momento. Ok. E agora vamos facilitar os quadros-chave. E desta vez, use o editor gráfico para fazer o cursor crescer rápido, desacelerar no meio e ganhar velocidade no final. Incrível. Acho que está ótimo, e agora podemos voltar à linha do tempo e assistir à animação que criamos até agora para ver como é Tudo bem. Acho que a animação parece muito boa. Mas, na minha opinião, não precisamos que a animação do logotipo aconteça aqui. Quero que o logotipo fique estático na cena. Quero aproveitar esta oportunidade para mostrar como você pode congelar suas pré-composições animadas. É muito simples. Primeiro, precisamos ficar no momento em que o logotipo já terminou a animação, depois clicar com o botão direito do mouse na pré-composição, ir para T e escolher congelar quadro Ótimo. Agora eu percebo que o logotipo não parece exatamente no centro da moldura, então vamos movê-lo um pouco para a esquerda. Isso é melhor. Ótimo. E agora vamos lidar com o tempo da animação de cliques dentro da pré-composição do botão Por enquanto, está acontecendo muito cedo. Para isso, vamos parar no momento em que o cursor faz a animação do clique e, em seguida, insira a pré-composição do botão e mova os quadros-chave aqui seguida, insira a pré-composição do botão e . Vamos verificar como isso parece. Acho que ele pode começar cinco quadros antes, então vamos ajustar o tempo bem rápido. Ótimo. E agora está muito melhor. É por isso que eu sempre sugiro verificar a animação algumas vezes para ver como é o movimento. Ok, agora vejo que toda a animação está ótima. Podemos reduzir o cursor antes composição e passar para a próxima etapa, que é adicionar a cena à composição principal Primeiro, podemos ficar na segunda quinta posição e reduzir essa linha do tempo até esse momento Depois de terminar, vamos até a composição principal e trazemos a cena final para a linha do tempo Ótimo. E agora vamos começar a trabalhar na transição. Primeiro, podemos entrar na cena final e ver onde está o meio da animação de introdução Aqui está. Vamos ficar neste momento e, na composição principal, recortar essa pré-composição até a posição do indicador de tempo Agora, vamos fazer com que essa pré-composição comece logo após a anterior e depois ajuste o final da pré-composição anterior Como queremos criar um bom corte de fósforo, podemos terminar a cena no ponto em que o cursor está prestes a sair da cena. Vamos agora trazer a cena final aqui e ver como fica. Podemos recortar alguns quadros do início da cena final para obter um movimento um pouco mais contínuo. Ok, isso parece bom. E agora vamos adicionar uma animação suave de zoom na cena final, para que ela não pareça muito estática. Podemos criar o primeiro quadro-chave aqui. Depois disso. Vamos parar em um momento, um pouco depois que a animação dentro dessa pré-composição terminar. Isso deve ser um pouco depois desse momento. Acho que devemos expandir um pouco a duração da competição final Então, vamos fazer isso bem rápido. Vamos fazer com que dure 7 segundos. Agora vamos expandir todas as camadas aqui e, depois disso, voltar para a composição principal e expandir a pré-composição Ótimo. Então, agora podemos ficar em 1 minuto e 8 segundos e escalar um pouco a pré-composição Vamos tentar 110. Agora vamos ver o que temos. Parece bom, mas não gosto como o cursor toca o logotipo na cena final Então, vamos inseri-lo e ajustar o caminho da posição do cursor. Tudo bem. Eu acho que está tudo bem. Vamos agora voltar à composição principal e ver como isso fica com o Zoom e a animação Parece ótimo. E agora vamos ficar no final da animação e pressionar para finalizar a área do fluxo de trabalho aqui e agora ver todo o projeto desde o início com a narração Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca de ajuda. Conheci One Point. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com o One Point, você tem uma visão geral clara de tudo em que sua equipe está trabalhando, todos os seus projetos, todas as suas tarefas, tudo em um só lugar. Preciso da imagem completa. Cada projeto inclui tarefas detalhadas, subtarefas e acompanhamento do progresso em tempo real, para que nada passe despercebido Quer ver quem está ficando para trás, acesse a guia da sua equipe para ver as atividades de todos em um piscar Preciso entrar em contato com alguém. Entre no sistema de mensagens integrado, onde todas as suas conversas são organizadas por contato. Envie um lembrete rápido ou compartilhe uma atualização instantaneamente. E sim, compartilhar arquivos é fácil. upload de qualquer documento e toda a sua equipe terá acesso a ele imediatamente. Então, por que continuar lutando? Acesse onepoint.com e torne seu dia de trabalho mais fácil Gerenciando uma grande equipe em Mul. Tudo bem, isso parece muito bom. E o mais importante, a animação é sincronizada com a narração Agora, depois de fazermos as duas coisas mais importantes corretamente, estamos prontos para passar para a próxima etapa, que é adicionar a animação do cursor em cada cena. Vai ser super divertido, então nos vemos na próxima. 24. Adicionando a animação de cursor: Volte. Nesta lição, começaremos a adicionar a animação do cursor à cena relevante. Observe que estamos começando a adicionar a animação do cursor somente depois de terminar a animação inteira e sincronizá-la com a narração E isso porque agora temos certeza de que o tempo da animação do clique no projeto está perfeitamente sincronizado com a narração Não queremos envolver a animação do cursor durante a animação inicial, pois isso complicará os ajustes de tempo no processo Como você deve se lembrar, ajustamos alguns quadros-chave de animação de fluxo de demonstração várias vezes e imagine se também precisássemos ajustar a animação do cursor Isso tornaria o processo muito mais lento. Portanto, prefiro imaginar a animação do cursor durante a animação inicial de todo o projeto e, somente depois de terminar e ter certeza de que o tempo é ótimo, adicionarei a animação do cursor. Tudo bem. Então, com isso dito, vamos começar a trabalhar na primeira animação do cursor, que, como você já deve entender, precisa acontecer na cena quatro. Na segunda parte da animação, vemos a tela da interface do usuário do projeto pela primeira vez. Então, vamos inserir essa pré-composição e, em seguida, adicionar a pré-composição do cursor que temos no projeto a essa linha do tempo Vamos marcar essa pré-composição em amarelo e começar a criar a animação do cursor E assim podemos ver nosso cursor um pouco melhor na cena. Podemos adicionar um traço branco a ele, só por enquanto. Posteriormente, projetaremos o cursor da maneira que quisermos. Por enquanto, precisamos nos concentrar em criar a animação primeiro. Então, vou inserir e selecionar a camada de forma. Agora vamos adicionar uma cor de traçado e escolher preto. Para a largura, você pode deixá-la em dois e agora podemos ver claramente o cursor. Ótimo. Então, agora vamos voltar para a composição principal e começar a animá-la minha experiência, descobri que a melhor maneira de fazer isso é usando um método muito simples. Deixe-me mostrar o que quero dizer. Tudo bem. Então, primeiro, não me concentro em criar a introdução ou a saída para o cursor A primeira coisa em que me concentro é o tempo. O tempo para as animações de clique que temos no fluxo de demonstração, por exemplo, neste momento, temos a animação de clique para a caixa do projeto Podemos entrar nessa pré-composição e encontrar o momento exato em que isso está acontecendo Nesse caso, está acontecendo neste momento. Então, agora, podemos ficar aqui e depois voltar para a composição principal. Em seguida, precisamos colocar o cursor na posição lógica e criar quadros-chave para a propriedade position neste momento Depois disso, não preste atenção em mais nada na cena além onde a animação do segundo clique está acontecendo. Como você pode ver, no nosso caso, isso está acontecendo neste momento. Então, o que vou fazer é levar o cursor para a área que a animação do clique está acontecendo. Agora, vamos ampliar a linha do tempo e continuar ajustando a posição do cursor de acordo com as animações de cliques que temos O próximo está acontecendo aqui. Então, vamos trazer o cursor aqui. Ótimo. E agora vamos seguir em frente e ver onde a próxima animação de clique está acontecendo e, em seguida, trazer o cursor até lá. Incrível. Agora vejo que não há mais animações de cliques nessa cena, então posso começar a criar a animação atro para o cursor E para isso, podemos ir 1 segundo após o último quadro-chave e tirar o cursor do quadro, como quisermos Desta vez, vamos arrastá-lo para o lado esquerdo. Ótimo. Por enquanto, a animação provavelmente parece muito estranha para você, mas confie em mim, em breve, tudo ficará claro Por enquanto, tente se concentrar no meu fluxo de trabalho. Então, primeiro, criamos os quadros-chave de posição inicial de acordo com a animação do clique Agora podemos começar a ajustar o caminho da posição para fazer o cursor se mover de uma forma mais arredondada e natural Para isso, vamos selecionar a ferramenta Vertex e primeiro lidar com esse ponto Clique aqui uma vez e agora vamos curvar o caminho. Agora, mude para a ferramenta de seleção. E agora vamos arrastar essa alça um pouco para cima. Podemos segurar Alt ou Option enquanto fazemos isso para garantir que movamos apenas uma alça sem afetar a segunda. Tudo bem. Agora vamos fazer o mesmo com a segunda alça. Ok, agora estamos quase terminando de ajustar o caminho. E antes de fazer isso, vamos criar a animação de introdução para o cursor Para isso, você pode retroceder 1 segundo dos quadros-chave da primeira posição e arrastar o cursor para a direita para fazê-lo entrar na cena pelo lado direito. Ótimo. Agora podemos terminar de ajustar o ponto da curva nesse caminho. Vamos curvar esse ponto também para que possamos fazer com que o cursor entre na cena com um movimento um pouco mais curvilíneo Nesse ponto, geralmente adoro ampliar e verificar a animação do cursor para ver se ela está sincronizada com a animação de cliques na cena Percebi que o cursor não deve ser colocado aqui neste momento porque esse é o ponto que ele precisa pular na caixa de tarefas Isso significa que precisamos fazer com que o cursor fique em algum lugar ao redor dele antes de chegar a esse ponto para criar a ilusão do movimento de toque Então, vamos retroceder 1 segundo a partir do primeiro quadro-chave de toque e mover o cursor para algum lugar Feito isso, vamos agora voltar para a ferramenta Vertex e também curvar o novo ponto Vamos ajustar a alça para ficar um pouco mais curvilínea. Moção. Incrível. E agora, para este ponto, podemos tornar o movimento mais suave ajustando a alça do primeiro ponto, abaixando-a e arrastando-a um pouco mais para a esquerda Ótimo. Agora, como você pode ver, temos um bom movimento arredondado e curvilíneo para a animação do cursor Também podemos curvar o último ponto e ajustar a alça para obter um movimento um pouco mais arredondado para a animação externa Tudo bem. Agora, depois de criarmos a animação inicial, vamos criar um movimento de clique para o cursor para que possamos sincronizá-lo com a animação de clique que criamos para os painéis. Obviamente, poderíamos criar uma animação em escala a cada momento. Onde temos um painel de interface de usuário, clique na animação, mas isso levaria muito tempo. E caso precisássemos ajustar o tempo da animação do clique, levaríamos uma eternidade para ajustar a animação do clique do cursor. Portanto, quero te ensinar um truque muito legal para sincronizar os cliques do cursor com os cliques do painel, para que você não precise cronometrar os dois manualmente Quando criei esse projeto, eu sabia que havia uma maneira de acionar a animação dentro de uma pré-composição usando uma expressão, mas eu não sabia exatamente como isso funcionava e, definitivamente, não sabia qual era a expressão ou em qual propriedade aplicá-la Nesse caso, usei o poder da IA para gerar a expressão , então agora eu quero te ensinar como fazer isso. Você pode assistir ao meu curso AI for motion, no qual aprendemos a usar esse GPT para criar expressões muito úteis apenas descrevendo o que queremos alcançar Não é necessário ter nenhuma experiência com expressões ou entender programação. Eu sugiro fortemente que você assista ao curso AI for motion, caso queira aumentar o nível do seu fluxo de trabalho e aproveitar as vantagens reais da IA no After Effects. Então, agora vou usar as mesmas técnicas desse curso para criar uma boa configuração para automatizar minhas animações de cliques aqui. Tudo bem Então, com isso dito, vamos voltar à ação. Em primeiro lugar, antes de ir para o Chat GPT, vamos criar a animação de cliques para o cursor Vamos ficar no início da linha do tempo e criar um quadro-chave de escala aqui Agora, digamos que essa animação dure dez quadros. Então, crie outro quadro-chave aqui. Então, vamos ficar no meio dos quadros-chave e reduzir a forma Por fim, vamos facilitar os quadros-chave e ajustar o movimento no editor gráfico para que o movimento comece rapidamente Como você pode ver, dessa forma, criamos uma boa animação de clique para o cursor. Ótimo. Então, agora eu quero acionar essa animação na minha cena principal. Nos momentos relevantes em que preciso sincronizá-lo com a animação de cliques dos painéis da interface do usuário. Mas digamos que não sabemos exatamente como fazer isso. Esse é o momento perfeito para passar alguns minutos para ver se podemos fazer isso usando uma expressão. A primeira coisa que adoro fazer é tirar uma captura de tela da minha cena e, ao mesmo tempo garantir que as camadas e seus nomes estejam claramente visíveis na captura Então, eu gosto de apontar para a camada sobre a qual falarei em breve com o Chat GPT Você não precisa fazer isso. Tudo bem Em seguida, vamos copiar essa captura de tela e, em seguida, acessar o Chat GPT e colar a imagem em um novo Também funciona perfeitamente com a versão gratuita do Chat GPT Ok. E agora eu começo a descrever minha situação, começando mencionando qual software eu uso Eu escrevo com um inglês ruim e muitos erros de ortografia e gramática, só para que você possa entender que não precisa de um inglês perfeito O objetivo principal é descrever a situação e explicar seu objetivo. É muito importante mencionar os nomes corretos das camadas às quais você está se referindo. Tudo bem. Então, quando terminarmos com isso, podemos pressionar Enter e deixar a IA fazer o que quiser. Agora, antes de aplicar a expressão ao projeto, adoro ler a explicação que o Chat GPT fornece Nesse caso, posso copiar a expressão e usá-la. Mas depois de ler as notas, percebo que a expressão que ela me deu precisa ser ajustada internamente. Vejo que, para ativá-lo, preciso ajustar alguns valores linha de texto de duração do clique. Digamos que eu não tenha ideia do que isso significa. Eu só quero uma expressão simples que ative minha animação de clique no cursor que eu criei dentro da pré-composição do cursor. Então, nesse caso, antes de colar a expressão atual, tentarei explicar ao Chat GPT que quero uma expressão que funcione sem que eu precise fazer ajustes no código Então, agora temos uma nova expressão. Podemos ler a explicação e aplicá-la acordo com as etapas de orientação fornecidas pelo Chat GPT Você também pode encontrar essa expressão na pasta de ativos que você baixou de mim. Então, copie-o caso a expressão que você criou não funcione depois de aplicá-la no projeto. Mas primeiro, eu quero que você use a expressão que você criou agora antes de aplicar a minha. Ok, então vamos agora voltar ao projeto e aplicar a expressão. Primeiro, como sugeriu o Chat GPT, precisamos ativar a função de remapeamento de tempo para o pré Em seguida, precisamos criar uma expressão para a propriedade time remap Então, vamos deixar de lado a expressão. Incrível. Feito isso, vamos agora ver se funciona. Então, primeiro, vamos chegar ao ponto em que a animação do primeiro clique deveria estar e, em seguida, vamos fazer a próxima etapa sugerida pelo Chat GPT Neste momento, precisamos criar um novo marcador na pré-composição, você pode usar o atalho Tudo bem. Agora, como você pode ver, a animação em escala que criamos dentro da pré-composição do cursor agora está acontecendo aqui sem que movamos os quadros-chave Isso significa que a expressão está funcionando perfeitamente. Então, agora podemos começar a criar novos marcadores. A qualquer momento, queremos que a animação do clique aconteça. Mas antes disso, podemos ajustar o movimento da animação do cursor para que ela se mova de uma forma mais natural e não linear, como ela se move agora. Precisamos que o cursor faça uma pausa em alguns quadros no momento em que a animação do clique acontece Deixe-me mostrar o que quero dizer. Vamos abrir apenas os quadros-chave de posição e, em seguida, selecionar todos eles e garantir que a velocidade esteja definida para, digamos, 85% Ao fazer isso, agora temos o movimento completamente lento nos pontos entre os quadros-chave É ótimo porque agora o cursor estará quase estático no momento da animação do clique do cursor. Ok. Mas agora há momentos em que não queremos que o cursor fique estático. Como neste momento, queremos que ele continue se movendo lentamente. Deixe-me mostrar como lidar com esses momentos. Primeiro, precisamos ter certeza selecionar os quadros-chave desse momento específico E então, usando o painel de velocidade dos quadros-chave, torne-os quadros-chave contínuos. Agora podemos ampliar e aumentar um pouco esses quadros-chave, para que a velocidade neste momento não seja zero Como você pode ver, agora ele não e continua se movendo lentamente. Feito isso, vamos agora lidar com os momentos em que temos a animação tocante acontecendo, exemplo, neste momento Para criar a ilusão do movimento de toque, precisamos acelerar o movimento do cursor no momento do toque E precisamos fazer com que ele volte super rápido para criar esse movimento saltitante Vamos ver como isso parece. Ótimo. Temos um bom movimento de toque saltitante Mas agora, como você deve entender, também precisamos criar o movimento de toque saltitante para os próximos quadros-chave Vamos tentar ajustar a velocidade dos quadros-chave para ver se conseguimos acertar Vamos arrastar essa alça para a direita. Estou tentando fazer o cursor se mover super rápido nesses dois pontos. Como você pode ver, não importa o que eu esteja fazendo, não parece certo. O movimento não parece uma animação tocante. Então, deixe-me mostrar o que precisamos fazer para melhorar a aparência. Vamos agora voltar ao cronograma e primeiro encontrar a área problemática com a qual precisamos lidar Estamos falando sobre a animação acontecendo aqui. Agora, vamos trazer esses quatro quadros-chave de volta aos quadros-chave lineares Segure o comando do controlador e clique em um deles uma vez. Depois disso, vamos ficar no meio desses quadros-chave e criar um quadro-chave com o valor atual Em seguida, vamos fazer o mesmo na segunda animação tocante. Finalmente, vamos avançar cinco quadros e criar um quadro-chave também antes do Outro Por enquanto, você pode não entender por que fizemos isso, mas logo tudo ficará claro. Por enquanto, vamos começar a ajustar o movimento. Selecione todos os quadros-chave da última parte e os alivie facilmente. E agora vamos ao editor gráfico e começaremos a ajustar o movimento Lembre-se de que queremos criar aquela animação vibrante e tocante Então, vamos fazer o cursor se mover rapidamente antes do momento do toque e rápido após o momento do toque. Ótimo. Então, agora queremos que o cursor fique no ar por alguns quadros, e é aí que nossos novos quadros-chave úteis, porque agora podemos fazer esse momento durar mais movendo a alça desse quadro-chave para a Em seguida, precisamos que o cursor tenha aquele movimento de toque saltitante, para que possamos ajustar a velocidade neste momento, como fizemos no momento de toque anterior Incrível. Então, agora vamos fazer o mesmo no momento final do toque Uma vez feito isso, vamos ver como fica. Ótimo. Como você pode ver, agora temos uma animação tocante mais perceptível E, na minha opinião, parece muito melhor do que a animação anterior que criamos no início. Tudo bem. Então, agora eu não quero que o cursor pare completamente antes de sair da cena Então, selecionarei esse quadro-chave e certificarei de que seja um quadro-chave contínuo, o que me permitirá abrir esses quadros-chave Agora, a velocidade aqui não será zero. Também posso mover a alça para a esquerda para fazer o cursor sair lentamente e ganhar velocidade no final. Caso goste desse movimento, você pode aplicá-lo aos momentos de flutuação nas partes tocantes da Podemos selecionar os momentos mesmo tempo enquanto pressionamos a tecla Shift e, em seguida, usar o atalho para abrir o painel de velocidade dos quadros-chave Agora, vamos tornar esses quadros-chave contínuos e não se esqueça de trazê-los à tona. Tudo bem, eu amo a aparência. Vamos agora sair do editor gráfico e ver essa parte da animação, junto com o resto da cena. Eu acho que isso parece ótimo. E com isso, agora estamos prontos para passar para a próxima cena em que precisa haver uma animação com o cursor em seu interior. Então, vamos até o master comp e dar uma olhada. Tudo bem, a próxima cena em que trabalharemos é a cena cinco. Antes disso, vamos fechar todas as pré-composições abertas que temos aqui Incrível. E agora vamos entrar cena e tentar entender o que precisamos fazer aqui. Ok, então vejo que o cursor deve entrar na cena por volta desse momento, e devemos criar uma animação de clique para abrir o painel de subtarefas e, em seguida, criar outra animação tocante para verificar algumas das subtarefas dentro Pensando nisso, vamos para a cena anterior em que criamos a animação do cursor e copiamos a pré-composição do cursor a partir daí, pois já temos a expressão aplicada nessa pré-composição Ok, e agora de volta à nossa nova cena atual, vamos colar a pré-composição do cursor e nos livrar de todos os quadros-chave nos marcadores que criamos Certifique-se de não excluir a propriedade de remapeamento de tempo. Em seguida, vamos para o início da linha do tempo e pressione a tecla do colchete esquerdo para iniciar essa pré-composição a partir daqui. Tudo bem E agora vamos começar a animá-lo. A primeira coisa que faremos é descobrir o momento em que a animação do primeiro clique está acontecendo na cena. Isso está acontecendo em algum lugar por aqui. Caso você não tenha certeza de onde exatamente a animação do clique começa, você pode entrar na pré-composição da interface e descobrir quando está acontecendo No nosso caso, está acontecendo aqui. Então, enquanto estamos aqui, vamos voltar para a cena principal e agora trazer o cursor aqui e marcar esse ponto criando os quadros-chave de primeira posição neste momento Ótimo. E agora podemos continuar animando a próxima animação do cursor ou podemos criar a introdução para ela Desta vez, vamos criar a introdução e continuar ajustando a animação para se adequar à animação do fluxo de demonstração Tudo bem? Então, vamos retroceder 1 segundo no tempo e tirar o cursor do quadro Vamos fazer isso. Entre na cena pelo lado direito. Legal. Agora temos uma animação de introdução e a colocamos onde animação de cliques no fluxo de demonstração está acontecendo Em seguida, vamos avançar 1 segundo e colocar o cursor em algum lugar por aqui , porque agora precisamos alguns quadros para o painel pop-up entrar na cena. Incrível. E agora vamos encontrar a próxima posição em que o cursor deve estar. Nesse caso, precisamos trazê-lo para a área da primeira subtarefa neste momento Então, vamos arrastá-lo até aqui. Em seguida, vamos ver onde a segunda subtarefa, a animação da caixa de seleção, é ativada e, em seguida, colocar o cursor ao lado dela Incrível. Agora, como aprendemos na cena anterior, podemos ficar no meio da animação tocante e mover a esfera um pouco para a esquerda para fazer com que ela flutue no movimento do ar Incrível. Então, quando tivermos todos os momentos de toque e clique, podemos avançar 1 segundo e tirar o cursor do quadro Agradável. Agora terminamos de criar o movimento inicial para o cursor e nossa próxima etapa é começar a ajustá-lo Podemos começar curvando os pontos relevantes, começando com os momentos em que a esfera deve pairar no ar Então, podemos arredondar o outtro nos pontos de introdução. Agora, vamos mudar para a ferramenta de seleção e começar a ajustar as alças dos pontos arredondados para obter um bom movimento curvo para o Tudo bem. Então, uma vez feito isso, vamos agora encontrar o momento em que vamos agora encontrar o momento em animação do clique está acontecendo e adicionar um novo marcador para acionar a expressão Incrível. Então, agora concluímos todas as etapas iniciais importantes e estamos prontos para começar a melhorar o movimento. Vamos selecionar todos os quadros-chave e facilitá-los facilmente. E agora vamos entrar no editor gráfico e ajustar a velocidade do movimento Nosso objetivo é fazer com que o cursor, neste momento, lento por um longo período de tempo, já que temos a animação de cliques acontecendo aqui. Dessa forma, fazemos o cursor se mova muito devagar por mais quadros. Ótimo. Então, agora, neste momento, eu geralmente verifico o resto da animação na cena e tento entender o que deve ser ajustado em seguida. Nesse caso, eu sei que preciso criar aquela animação tocante para a parte de animação do subpainel de tarefas Portanto, vamos selecionar esse quadro-chave e arrastar a alça esquerda para a direita, que o cursor fique super rápido no momento do toque Então, para criar o movimento saltitante, precisamos fazê-lo rápido após o ponto de toque, muito parecido com o que fizemos na cena anterior Ok, agora vamos fazer o mesmo no segundo momento tocante Ótimo. Agora, depois de verificar essa parte algumas vezes, digamos que decidimos fazer com o cursor permaneça na cena por um período um pouco mais longo. Eu não quero que ele saia da cena logo após o segundo momento tocante Para isso, vamos ficar no último quadro-chave e alterar a posição do cursor para ser colocado em algum lugar por aqui Vamos ajustar a curva para esse ponto. Ótimo. E agora vamos avançar 1 segundo no tempo e mover o cursor para fora da cena. Incrível. E agora, antes de prosseguir, vamos primeiro ver como fica a animação que criamos. Tudo bem. Então, notei que, nesse momento, o cursor para totalmente e eu não adoro isso. Vamos corrigir isso convertendo esse quadro-chave em um quadro-chave contínuo e acelerando o movimento Ótimo. Então, agora temos um movimento um pouco melhor. Mas notei que a primeira animação tocante não parece correta E é porque temos uma grande quantidade de tempo entre os quadros-chave antes do ponto de contato e os quadros-chave do ponto de Portanto, podemos encontrar um bom ponto no tempo antes do ponto de toque e mover o cursor um pouco para criar um novo quadro-chave Certifique-se de que você ainda tenha esse caminho arredondado. Tudo bem. Agora, depois de fazer isso, podemos entrar no editor gráfico e ter um pouco mais de controle sobre a animação e a velocidade do primeiro momento de toque Podemos acelerar o movimento de toque arrastando essa alça para a direita E agora vamos lidar com o quadro-chave intermediário. Primeiro, precisamos garantir que o movimento de entrada e saída desses quadros-chave estejam conectados para possamos controlá-los como uma unidade, e podemos fazer isso convertendo esse quadro-chave em um quadro-chave contínuo Agora podemos decidir qual deve ser a velocidade neste momento. Vamos ver o que temos. Parece ótimo. Vamos agora lidar com o movimento flutuante entre os momentos emocionantes Não quero que o cursor pare completamente neste momento, então vou me certificar de acelerar o movimento de entrada e saída quadros-chave em uma unidade Incrível. Isso parece muito melhor. Então, ao fazer todas essas etapas, tentei mostrar como brincar com os quadros-chave quando você precisa que o movimento se ajuste à sua imaginação Esse é o processo de design de movimento real. Também verificamos a animação e ajustamos os quadros-chave até obtermos algo de que gostamos Então eu estou verificando o movimento mais uma vez. Toda vez que assisto, noto algo novo. Desta vez, não adoro que a animação pare por aqui. Não parece certo. Então, vou me certificar de tornar esse momento um movimento mais contínuo. Tudo bem. Então, com isso dito, vamos agora assistir a cena inteira do começo ao fim e ver como fica. Parece ótimo, mas acho que podemos fazer alguns ajustes finais para melhorar a aparência Acho que o movimento de introdução é muito rápido. Vamos fazer com que os primeiros quadros-chave comecem 1 segundo antes para que a introdução dure mais, que fará com que pareça Vamos assistir mais uma vez. Percebi que o movimento saltitante é muito difícil no segundo momento de toque Então, vamos entrar no editor gráfico e facilitar um pouco. Tudo bem, isso parece melhor. E como o quadro-chave final da animação tocante termina nos segundos sete e dez quadros, vamos começar o Otro a partir dos segundos oito e dez quadros apenas para fazer exatamente 1 Tudo bem, então com isso, terminamos a cena e estamos prontos para passar para a próxima Então, vamos voltar à composição principal e encontrar a próxima cena com a qual precisamos lidar . Tudo bem Então, vejo que temos duas cenas com as quais trabalhar. Cena sete e oito, as animações do cursor nessas duas cenas são um pouco mais simples do que as anteriores. Então, vamos começar. Começaremos com a cena sete. Primeiro, vamos entrar na cena e trazer o cursor para a pré-composição da anterior. Agora, vamos excluir os quadros-chave de posição que temos nela e, em seguida, excluir também o marcador Vamos ficar no início da linha do tempo e pressionar a tecla do colchete esquerdo para iniciar essa pré-composição a partir daqui. Tudo bem Então, agora vamos ver o que temos aqui. Vejo que a animação do primeiro clique está acontecendo aqui. Então, vamos ficar neste momento e colocar o cursor em algum lugar ao redor da segunda caixa de contato. Agora, vamos marcar esse ponto com os quadros-chave de posição. Hum, antes de prosseguir com a animação de fluxo de demonstração, vamos até o início da linha do tempo e arrastemos o cursor para a direita para fora do quadro para criar a animação de introdução para ela Ótimo. Agora podemos avançar 1 segundo e trazer o cursor para algum lugar por aqui para que ele não interfira na transição que está acontecendo na animação do fluxo de demonstração. Tudo bem E agora vamos ver onde o próximo clique está acontecendo ou se há algum momento emocionante durante a animação Como você pode ver, o próximo clique acontece depois de muitos segundos, o que significa que temos muito tempo livre o cursor fazer alguma coisa. Nesses casos, adoro mudar a posição do cursor a cada 1 segundo. Estou fazendo isso apenas para ter uma primeira ideia do movimento do cursor. Mais tarde, vou ajustá-lo, se necessário. Então, vamos fazer isso agora. Vamos ficar em nossos últimos quadros-chave avançar 1 segundo e abaixar o cursor um pouco mais perto momento do clique que precisa acontecer na área do botão Em seguida, mova-se 1 segundo novamente e leve-o para algum lugar por aqui. Vamos continuar fazendo isso até chegarmos ao botão. Como temos o texto aqui, vou garantir que o cursor não colida com ele Tudo bem. E agora, depois de apertar o botão, podemos mover 1 segundo e tirar o cursor do quadro para criar a animação externa para ele Incrível. Então, com isso feito, podemos passar para a próxima etapa. Neste ponto, a melhor coisa a fazer é ajustar o caminho, e podemos fazer isso usando a ferramenta Vertex Então, vamos primeiro arredondar todos os pontos relevantes e, depois disso, usando a ferramenta de seleção, ajustar as alças para ter um caminho bonito e arredondado. Então, uma vez feito isso, agora podemos criar um marcador no momento em que o clique está acontecendo Temos o primeiro clique aqui e temos outro para o botão. Vou ajustar esses pontos bem rápido. Ok. Então, agora vamos criar um marcador aqui também. Ótimo. Então, agora vamos selecionar todos os quadros-chave e facilitá-los facilmente. Depois disso, podemos começar a ajustar o movimento. Desta vez, vamos definir a velocidade de todos os quadros-chave em 85% e ver como fica Ok, acho que está bom por enquanto, mas na minha opinião, a animação externa não parece certa Vamos cancelar a curva do último ponto do caminho para fazê-lo sair em um caminho reto e ver como ficará. Isso é muito melhor, mas está acontecendo muito rápido, na minha opinião. Então, vamos garantir que a animação externa dure 2 segundos e não um Sim, isso é muito melhor. Incrível. Então, agora que terminarmos toda a animação inicial, vamos tentar fazer alguns ajustes para fazer com vamos tentar fazer alguns ajustes para fazer o cursor se mova de uma forma mais fluida. Não adoro as pausas que acontecem nessas áreas. A primeira coisa que podemos tentar é excluir esses quadros-chave. Em seguida, vamos ajustar as alças dos pontos para criar um caminho bonito e cheio de curvas. Tudo bem Isso já parece um pouco melhor. Agora, vamos selecionar esses três quadros-chave onde obtivemos momentos de pausa e abrir o painel de velocidade dos quadros-chave para torná-los quadros-chave contínuos Uma vez feito isso, vamos ao editor gráfico e nos certificamos de que a velocidade nesses momentos seja maior que zero. Neste momento, estou apenas assistindo à animação e tentando ajustar a velocidade dos quadros-chave para ter um movimento que pareça adequado para Na minha opinião, neste momento em que o cursor está pairando sobre o texto, isso está acontecendo muito rápido. Então, vamos garantir que essa animação dure um pouco mais. Vamos assistir à animação algumas vezes e ver o que mais podemos melhorar. Eu não gosto da pausa acontecendo aqui, então vamos corrigir isso bem rápido Ok, isso é melhor. Mas agora eu não quero que o cursor se mova rapidamente antes de alcançar o botão Então, vou ajustar as alças dessa forma, para que a velocidade entre esses dois quadros-chave não seja tão rápida Estou mostrando esse processo para que você possa ver meu processo de pensamento e como eu lido com os ajustes na animação. Tudo bem, com isso feito. Quase terminamos a cena. A única coisa que está me incomodando é que o cursor toca o Para corrigir isso, podemos diminuir um pouco o texto e, ao mesmo tempo garantir que ainda estamos as diretrizes da grade de ação segura. Incrível. Isso parece melhor. Agora podemos ajustar um pouco o caminho para que o cursor não fique tão próximo tela da interface do usuário. Ótimo. Então, acho que terminamos de trabalhar na cena porque tudo parece ótimo. Então, vamos salvar o projeto e continuar trabalhando no próximo. Ok, então para a próxima cena, podemos fazer o cursor entrar na cena pela parte superior, então teremos um bom movimento contínuo da cena anterior, onde o cursor saiu da cena pela parte inferior Tudo bem. Com isso em mente, vamos entrar na cena oito e começar a trabalhar. Primeiro, vamos trazer a pré-composição do cursor aqui. Podemos copiá-lo de uma das cenas anteriores. Agora, vamos nos livrar dos quadros-chave de posição e dos marcadores que temos neles Não se esqueça de levar a pré-composição para o início da linha do tempo quando terminar. Tudo bem. E agora vamos começar a animá-lo. Como de costume, vamos nos concentrar primeiro em encontrar a animação do primeiro clique. Isso acontece a partir de agora, temos a animação de cliques do botão do anúncio aqui. Então, vamos trazer o cursor aqui e criar quadros-chave de posição Tudo bem. E agora vamos para o início da linha do tempo e tirar o cursor da cena E como temos muito tempo até a animação do clique, podemos ficar na segunda e trazer o cursor aqui para que possamos ter uma introdução agradável e cheia de curvas Incrível. E agora, como a próxima animação de clique ou toque acontecerá mais tarde na linha do tempo, podemos nos mover 1 segundo após últimos quadros-chave e mover o cursor em algum lugar Em seguida, precisamos criar a ilusão do cursor pegando o arquivo JPG e arrastando-o e soltando-o no painel pop-up Para isso, primeiro, precisamos ter certeza sincronizar a animação do cursor com os movimentos da câmera. No nosso caso, é a animação de posição da tela de interface do usuário antes da composição. Precisamos nos posicionar no momento em que o movimento panorâmico correto da câmera termina e levar o cursor até o local do arquivo Ótimo. Feito isso, não se preocupe com o movimento curvo do arquivo Nós faremos isso mais tarde. Por enquanto, vamos nos concentrar em sincronizar o tempo dos quadros-chave Agora, quando voltarmos ao centro, vamos posicionar o cursor novamente na localização do arquivo. Ótimo. E agora vamos avançar 1 segundo e abaixar um pouco o cursor para ficar aqui por alguns quadros antes de sair da cena Depois disso, podemos mover mais um segundo e tirar o cursor do quadro, digamos, do lado esquerdo desta vez. Tudo bem E agora, quando terminarmos a animação inicial, vamos selecionar a ferramenta Vertex e começar a ajustar o caminho Vamos primeiro clicar nesse ponto. Ótimo. E então, para o próximo ponto, vou deixar como está, porque uma animação de clique precisa acontecer aqui. Em seguida, vamos seguir em frente e clicar no terceiro ponto. Incrível. Vamos seguir em frente. Vamos agora clicar aqui para arredondar esse ponto. E, por enquanto, não se preocupe se não corresponder à animação do arquivo e nossa ilusão não estiver funcionando Nós vamos lidar com isso em um segundo. Por enquanto, vamos terminar de ajustar o resto dos pontos. Vou clicar aqui no último ponto. E agora vamos pegar a ferramenta de seleção e ajustar a alça para obter um bom movimento arredondado neste momento. Em seguida, vamos voltar para a parte de arrastar a animação do arquivo e ver o que precisamos fazer aqui Primeiro, vamos nos certificar de que estamos no meio da animação do arquivo de arrastamento para que possamos ter uma ideia de onde o cursor precisa ser colocado E agora precisamos combinar a animação do cursor com a animação do arquivo. Para isso, basta clicar nesse ponto e selecionar a alça correta. Agora, ao movê-lo, mantenha pressionada a opção Alter para movê-lo somente sem afetar o lado esquerdo. Dessa forma, podemos curvar esse caminho para ajustar o movimento do arquivo. E para saber exatamente como a curva deve ficar, precisamos ver a curva do caminho da camada do arquivo. Então, vamos clicar nele para ver seu caminho. Agora, vamos criar um novo guia para marcar o ponto mais curvilíneo do caminho Em seguida, vamos selecionar o cursor e ajustar a alça de forma que ela caiba na guia. Ótimo. E agora, para manter a ilusão mais realista, também precisamos combinar a velocidade do movimento do arquivo com a velocidade do cursor E como a velocidade que definimos para a animação do arquivo é 85%, devemos fazer o mesmo com o cursor, mas faremos isso em um minuto Por enquanto, vamos continuar nos concentrando em ajustar o caminho. Quero contornar mais o caminho aqui para obter um movimento mais curvilíneo Vamos fazer o mesmo neste ponto. Também quero curvar o movimento de introdução. Tudo bem. Agora, com isso feito, podemos começar a ajustar a velocidade Vamos selecionar todos os quadros-chave e definir a velocidade para 85% Tudo bem. E agora vamos ver o que temos. Parece bom, mas temos alguns pequenos ajustes para fazer aqui. Mas primeiro, vamos adicionar um marcador no momento do clique para acionar a animação do clique dentro da pré-composição do cursor Incrível. E agora vamos começar a ajustar o movimento Agora, neste momento, como já fizemos algumas vezes nas cenas anteriores, tudo o que estou fazendo é assistir a animação algumas vezes e ajustá-la em partes em que não quero ter pausas no movimento A essa altura, você já deve saber como lidar com esses momentos. Neste momento, quero que o cursor comece a sair da cena lentamente e não quero que ele pare completamente nesse momento Tudo bem, agora vamos voltar para a linha do tempo e ver toda a animação que criamos desde o início da cena Parece bom, mas notei que há um momento de pausa no momento em que o cursor está prestes a apertar o botão. Estou falando sobre esse ponto. Vamos nos livrar dessa pausa bem rápido. É melhor. Agora vamos ver a animação algumas vezes e verificar se há outros a 25. Aprimorando o visual com efeitos e cores: Volte. Agora, quando terminarmos de criar a animação, podemos começar a adicionar alguns toques e efeitos visuais interessantes para melhorar visualmente o vídeo Vamos começar colorindo o cursor que aparece em muitas cenas do nosso projeto. Como você pode ver, por enquanto, parece muito chato. Então, para começar, podemos colorir com algumas cores interessantes. E para isso, usaremos a animação de fundo em gradiente que criamos no início do projeto Deixe-me mostrar o que quero dizer. Primeiro, vamos desligar o traço preto. Em seguida, vamos encontrar o arquivo de fundo gradiente que renderizamos e trazê-lo para a linha do tempo. Ótimo. E agora vamos reduzir essa camada, mas não muito. Precisamos dela para cobrir a esfera que temos aqui. Incrível. Então, agora, uma vez feito isso, podemos usar a função track mat para fazer com que a camada de fundo use o tapete alfa da esfera. Dessa forma, vamos mascarar o fundo gradiente usando a forma da esfera E agora temos um bom cursor colorido que parece muito melhor do que uma cor estática. Incrível. Feito isso, vamos voltar à composição principal e entrar em uma das cenas em que temos uma animação com o cursor Vamos entrar na cena oito. Quando estivermos lá dentro, quero que você amplie o cursor para vê-lo de perto. Ótimo. E agora deixe-me mostrar um truque fácil para adicionar mais profundidade ao cursor. Vamos clicar com o botão direito do mouse na pré-composição do cursor, ir para Estilos de camada e selecionar e adicionar um efeito de sombra interno Depois disso, antes de começar a ajustar o efeito, será uma boa ideia fechar esse pré-comunicador para garantir que você esteja trabalhando na forma final desse pré-comunicador OK. E agora podemos escolher uma bela cor brilhante para a sombra interna. Vamos usar o amarelo por enquanto. Então, para que ele se misture melhor com as cores do cursor, podemos definir o modo de mesclagem para a tela Como você pode ver, isso parece um pouco melhor. Depois disso, podemos aumentar a opacidade para 100 e brincar com o ângulo Nesse caso, quero que essa sombra interna seja totalmente visível no cursor, não apenas de um ângulo. Para isso, podemos definir a distância como zero e depois brincar com a propriedade de tamanho. Ótimo. Como você pode ver, agora temos um pouco de três D para o cursor, e agora eu não quero que você faça nada, escute. Eu te avisarei quando voltar à ação. E isso é porque eu quero mostrar como criar adequadamente esse efeito para o resto das cenas com uma animação de cursor dentro. Tudo bem. Então, a coisa óbvia que podemos fazer é copiar os estilos de camada dessa pré-composição e começar a colá-los no resto das pré-composições do cursor Dito isso, depois feliz com a aparência do efeito, voltarei à composição principal e encontrarei a próxima cena com a animação do cursor para colar o efeito nela Vejo que o tenho na primeira cena, então vou inseri-lo, selecionar a pré-composição do cursor e colar o efeito Depois disso, vou para a próxima cena e, em seguida, insiro nela para colar o efeito na pré-composição do cursor. Bem simples. Mas e se eu quiser mudar a aparência desse efeito? Nesse caso, eu precisaria inserir cada pré-composição e fazer isso manualmente para todas as pré-composições e fazer isso manualmente do cursor em cada cena. Como você deve entender, isso levará muito tempo. Especialmente se eu tiver mais de dois ou três cursores para ajustar Portanto, quero ensinar a você uma maneira melhor copiar e colar seus efeitos quando precisar eles estejam em mais de uma cena e quando quiser controlar o efeito de todos eles em uma camada. Então, vou desfazer minha ação e voltar à situação inicial Agora, você pode voltar e me acompanhar. Tudo bem. Então, nesse caso, o que farei é primeiro criar o efeito na cena em que a pré-composição do cursor aparece primeiro no projeto Em breve, explicarei o porquê. Por enquanto, vamos cortar o efeito dessa pré-composição e depois ir para a composição principal para ver onde vemos o cursor pela primeira No nosso caso, está na primeira cena. Então, vamos inseri-lo e colar o efeito na pré-composição do cursor. Tudo bem. Agora, digamos que acabamos de criar o efeito e sabemos que ele precisa aparecer nas próximas cenas do projeto. Então, vamos selecionar o efeito. E agora, em vez de usar a cópia normal, podemos ir para Editar e usar a função de cópia com links de propriedades relativas. Ótimo. E agora vamos para a cena oito, selecione a pré-composição do cursor e cole o efeito Ao usar essa função, agora temos todas as propriedades do efeito associadas às propriedades do efeito que, no nosso caso, é a pré-composição do cursor da primeira cena Isso significa que agora, se eu precisar redesenhar o efeito, vou para minha primeira cena, ajusto as propriedades lá, e elas serão ajustadas automaticamente no resto das cenas Como você pode ver, o design também mudou na cena. Mesmo que os valores aqui não pareçam ter sido alterados, você pode ver claramente que isso ainda funciona perfeitamente. Tudo bem. Então, agora vamos trazer o design de volta ao normal e continuar colando o efeito para o resto das cenas. Vamos para a cena dois e colá-la aqui. Se você abrir as propriedades do efeito, você as verá em vermelho, que significa que todas elas são criadas usando expressões para o efeito na primeira cena Então, agora, se você precisar redesenhar a aparência do efeito, é fácil lembrar de ir até a primeira cena e fazer as alterações lá É por isso que eu prefiro usar essa função de cópia exclusiva da primeira cena em que a camada com o efeito aparece no projeto. Tudo bem. Então, agora, com isso dito, vamos terminar de colar o efeito para o resto das cenas Podemos mover essa pré-composição para a direita para obter a ordem cronológica Dessa forma, posso ver onde eu já colei o efeito. Tudo bem, então, quando terminarmos com isso, vamos salvar o projeto para garantir o progresso que fizemos até agora Ótimo. E com isso, terminamos de ajustar o design do cursor E agora vamos aproveitar essa oportunidade para melhorar a aparência do botão Call to Action que temos na cena final. Mostrarei como, usando efeitos básicos, você pode criar uma aparência bastante impressionante para seus botões ou até mesmo para pré-composições inteiras da tela da interface Primeiro, vamos ao painel Efeitos e predefinições, procure o efeito CC Light sweep e aplique-o ao botão Normalmente, esse efeito é usado para criar uma boa aparência brilhante para logotipos ou camadas de texto Mas, no nosso caso, vamos usá-lo para criar um efeito de borda brilhante e fresco Deixe-me mostrar o que quero dizer. Primeiro, vamos alinhar o efeito ao centro do botão Em seguida, vamos alterar a forma do efeito para linear. Depois disso, vamos ajustar a largura de acordo com o formato do botão. Acho que 70 parece bom. Então, para a suavidade, podemos configurá-lo para, digamos, dez Em seguida, para a cor, tente escolher algumas cores brilhantes. Vamos usar uma cor amarela ou laranja brilhante. Tudo bem E agora você pode brincar com as propriedades de intensidade e espessura da borda até obter a aparência desejada. Feito isso, podemos ir para o início da linha do tempo e animar a direção Mas, em vez de criar quadros-chave, podemos usar uma expressão simples para fazer com que ela gire automaticamente. Então, vamos abrir a caixa de expressão dessa propriedade e, dentro dela, escrever uma expressão de tempo simples. Asterisco T 100. Agora, essa propriedade será animada automaticamente. Vamos ver como isso parece. Parece ótimo, mas eu prefiro ver apenas as bordas brilhantes sem ver nenhum brilho no centro do botão Para isso, podemos definir a intensidade da varredura para zero. Ótimo. Depois de ficarmos satisfeitos com os resultados, agora podemos salvar o projeto e passar para a próxima etapa para tornar agora podemos salvar o projeto e passar para a próxima etapa para tornar esse efeito um pouco melhor e, para isso, podemos usar o efeito de brilho Então, vamos encontrá-lo na guia Efeitos e aplicá-lo à pré-composição Agora, antes de prosseguir, quero mencionar que a ordem dos efeitos no painel Efeitos afetará a aparência do objeto com o qual estamos lidando. Com isso em mente, vamos colocar o brilho abaixo da varredura e ajustar algumas propriedades para que pareça um pouco mais brilhante. Nesse momento, a melhor maneira de obter uma aparência bonita é simplesmente alterando algumas propriedades e valores do efeito até obtermos algo de que gostemos E isso porque a aparência do efeito muda de acordo com a cor do botão e os valores do efeito de varredura Não há valores específicos usando o efeito de brilho que se ajustem a todas as cores e a todos os designs Portanto, sugiro que você brinque com as propriedades e veja o que você ama e o que mais se adequa ao seu projeto. Tudo bem. Agora, quando terminarmos o design do botão, podemos salvar o projeto e passar para a próxima etapa. Nesse ponto, podemos voltar à composição principal e começar a adicionar planos de fundo para as cenas sem nenhum plano de fundo interno Podemos começar com a primeira cena. Então, vamos entrar e começar a trabalhar. Em primeiro lugar, vejo que temos uma camada de texto que usamos como referência que podemos excluir agora. Ótimo. E agora, antes de adicionar o plano de fundo, vamos aproveitar essa oportunidade e organizar nosso painel de projetos. Vejo que existem algumas pré-composições que podemos mover para a pasta de pré-composições Tudo bem. Agora, vamos encontrar o fundo gradiente que criamos para o projeto e adicioná-lo à cena Como você já deve ter entendido, isso não será uma boa ideia porque a camada de fundo é muito pequena para essa cena grande. Se virmos isso na composição principal, podemos ver claramente que não parece bom A boa notícia é que podemos resolver esse problema apenas dimensionando a camada para caber nas dimensões da cena E antes de fazermos isso, prefiro usar a camada de fundo que temos nas cenas de animação do título, pois há alguns efeitos nela que fazem com que os gradientes pareçam um pouco melhores do que a camada original Então, vamos primeiro voltar para a primeira cena e excluir a camada de fundo aqui. Depois disso, vamos encontrar a primeira animação do título e inserir essa pré-composição para copiar a camada de fundo de lá Uma vez feito isso, vamos voltar para a primeira cena e colar a camada. Ótimo. E agora vamos colocar essa camada abaixo todas as camadas e alinhá-la ao centro da composição dessa O efeito ficará melhor quando o animarmos. Agora, podemos escalar essa pré-composição, mas antes disso, vamos excluir todos os quadros-chave de escala Em seguida, vamos escalar essa pré-composição até cobrir toda a cena Não tenha medo de escalá-lo porque temos o efeito rápido de desfoque de caixa nessa camada, que significa que os gradientes continuarão com uma boa aparência, mesmo se os escalarmos Incrível. E agora podemos brincar com a posição da camada de fundo para ver qual área de cor fica melhor para essa cena. Na minha opinião, a parte inferior do fundo gradiente parece muito boa, então vou deixar assim Feito isso, vamos passar para a próxima cena. Vamos agora entrar na cena dois e colar o fundo gradiente aqui também E antes de continuar, quero fazer essa cena parecer um pouco mais sombria, já que essa cena fala sobre alguns problemas, como muitas mensagens e muitas tarefas Portanto, pode ser uma boa ideia fazer com que essa cena se encaixe no conceito de texto escurecendo as vibrações Então, agora vou mostrar algumas maneiras de fazer isso usando efeitos simples. Para o primeiro método, não quero que você faça isso comigo, pois não o usaremos. Usaremos o segundo. Então, por enquanto, basta assistir e ouvir. Em breve, avisarei quando voltar à ação. Tudo bem. Portanto, para o primeiro método, podemos usar o efeito invertido e depois brincar com os canais Como você pode ver, cada opção aqui cria uma aparência muito diferente que pode ficar muito bem com as cores do seu gradiente. Você pode combinar esse efeito com o ajuste da propriedade de matiz principal do efeito de matiz e saturação e ver se consegue obter algo de que goste Tudo bem, vou excluir o efeito invertido e agora vamos voltar a trabalhar juntos Às vezes, queremos ter controle total sobre as cores em nosso gradiente. E para isso, podemos usar o efeito trítono. Então, vamos primeiro aplicá-la à camada e, em seguida, ir ao painel do projeto e trazer a paleta de cores para a cena para obter uma amostra das cores Ótimo. Então, agora você pode ter mais controle sobre as cores. Mas se você quiser ainda mais controle, pode mudar a propriedade do tom para Penton E isso lhe dará o controle da roda de cores completa que você tem no gradiente. Agora podemos experimentar as cores mais escuras da paleta de cores ou até mesmo decidir que queremos que a cena de vibração mais escura seja principalmente com as cores roxas que temos na paleta de cores Neste momento, estou apenas tentando provar as cores roxas e ver o que ficará melhor. Você também pode escolher a cor desejada manualmente. exemplo, estou escolhendo agora a cor branca para aquela área de cor específica e o fundo gradiente. Quando estivermos bem com os resultados, agora podemos excluir a paleta de cores e, em seguida, colocar o fundo gradiente abaixo de todas as camadas. Isso parece bom. Mas acho que a cena deveria parecer um pouco mais sombria. Para isso, podemos adicionar o efeito de curvas e depois brincar com os canais RGB para tornar o gradiente Como você pode ver, isso parece muito bom. Então, agora vamos até a composição principal e ver como isso se parece com a cena anterior Na minha opinião, isso parece ótimo. E agora também podemos adicionar esse fundo de gradiente escuro à próxima cena E para isso, vamos voltar à cena dois e copiar o fundo gradiente daqui Em seguida, vamos para a cena três e colá-la aqui. Vamos agora colocar essa camada abaixo de todas as camadas aqui. Eu acho que parece bom. Ótimo. E agora vamos voltar para a composição principal e ver o que devemos fazer a seguir Já temos um bom plano de fundo para a cena quatro, e acho que não precisamos mudar nada aqui. Como você pode notar, estamos obtendo alguns padrões interessantes aqui, acordo com os fundos gradientes que temos em diferentes tipos de cenas no projeto Para as cenas do título, temos o fundo com gradiente de matiz aprimorado para as cenas que falam sobre problemas Temos um fundo gradiente escuro. Para as cenas da tela da interface do usuário, temos o fundo gradiente regular Esse é um bom método a ser seguido em seus próximos projetos. Para torná-lo um pouco mais interessante, você pode dividir o script em partes principais e adicionar um plano de fundo específico para cada parte, como estamos fazendo agora. Com isso dito, vamos acompanhar nosso padrão e adicionar um plano de fundo regular para a cena cinco, já que essa é uma cena com uma animação de tela de interface do usuário. Para isso, podemos entrar na cena quatro e copiar o fundo gradiente que temos lá De volta à cena cinco, vamos colá-la aqui e colocá-la abaixo de todas as camadas. Ótimo. E agora, antes de continuarmos adicionando os planos de fundo relevantes para as próximas cenas, vamos aproveitar essa oportunidade para melhorar a aparência dessa cena aqui Deixe-me mostrar o que quero dizer. Primeiro, vamos inserir as tarefas pré-composição. O que eu não gosto aqui é a aparência da sombra quando o painel de subtarefas aparece A sombra parece cinza escuro, o que, na minha opinião, não se encaixa no design geral que temos no projeto. Para corrigir isso, tudo o que precisamos fazer é adicionar o efeito de preenchimento e escolher uma cor diferente. Vamos usar o branco e ver como isso fica com o resto da cena. Parece bom, mas combina demais com o painel de subtarefas Vamos ficar aqui e depois provar a cor roxa que temos. Como você pode ver, isso parece muito melhor. Então, agora vamos copiar o efeito e colá-lo na outra cena em que temos a camada de sombra. Não me lembro onde estava. Então, vamos voltar para a composição principal e encontrá-la. Aqui está na cena oito. Vamos entrar na cena e, em seguida, na tela da interface do usuário antes da composição. Uma vez aqui, vamos selecionar a camada de sombra e colar o efeito. Incrível. Então, agora, com isso feito, vamos voltar à composição principal e continuar verificando as próximas cenas em que precisamos adicionar um fundo gradiente Ok, vejo que as cenas seis e sete não têm um plano de fundo. Então, primeiro, vamos para a cena cinco e copiemos o fundo gradiente daqui Então vamos para a cena sete e colamos a camada. Agora, coloque a camada abaixo de todas as camadas e vamos ver como fica. Ok, isso parece ótimo. Mas eu não gosto da animação de dissolução da tela principal da interface do usuário. Então, vamos usar essa oportunidade para melhorar a aparência. Primeiro, vamos inserir as mensagens pré-composição e encontrar a camada relevante. Aqui está. É a pré-composição que temos aqui abaixo de todas as camadas. E agora, para melhorar a animação de dissolução, podemos adicionar uma animação de desfoque suave durante a dissolução Para isso, primeiro, vamos abrir os quadros-chave nessa camada e ficar no início da animação aqui Em seguida, vamos adicionar o efeito de desfoque de caixa rápida a ele e criar um quadro-chave para o raio de desfoque com um valor zero neste momento Em seguida, vamos avançar um pouco até o ponto em que a camada ainda está visível e definir o desfoque para um valor maior Tudo bem. E agora vamos levar esse quadro-chave até o final da animação Depois, alivie facilmente os quadros-chave e veja como ficam. Incrível. Acho que parece muito melhor agora. Então, vamos voltar à composição principal e encontrar a próxima cena em que precisamos adicionar um fundo gradiente. Tudo bem. A próxima é a cena oito. Vamos inseri-lo e adicionar o fundo gradiente aqui. Além disso, acho que não precisamos fazer nenhum ajuste aqui. Vamos voltar à composição principal e ver como isso se parece com a cena anterior Acabei de notar que a camada de fundo tem a animação de introdução que criamos para a cena da qual a copiamos Nessa cena, não precisamos dessa animação de introdução, então vamos excluí-la Selecione a camada e pressione para ver os quadros-chave. Agora, primeiro exclua os primeiros quadros-chave e depois o segundo Dessa forma, a máscara permanecerá como está após os segundos quadros-chave, que é o que queremos Para ser honesto, podemos excluir a máscara completamente, mas vamos deixá-la por enquanto e depois voltar para o resto das cenas com essa camada de fundo gradiente para excluir também a animação de introdução Essa é a cena em que precisamos da animação de introdução, então vamos deixar como está Aqui, tudo parece bem. Aqui, também, tudo parece bem. A primeira cena também parece boa. Tudo bem. Então, uma vez feito isso, vamos para a cena nove e adicionaremos um fundo gradiente E como essa cena se parece com a primeira cena, vamos para a primeira cena e copiemos o fundo gradiente que temos lá Tudo bem, de volta à cena nove, vamos colar a camada aqui e definir a escala para 100 Em seguida, vamos alinhá-lo ao centro da composição e colocá-lo abaixo de todas as camadas Ótimo. E agora vamos voltar à composição principal e ver como isso se parece com a cena anterior Como você pode ver, temos uma situação estranha aqui com os fundos gradientes. Eu queria te mostrar essa situação que você soubesse como lidar com ela. As cenas oito e nove são basicamente uma cena contínua. Isso porque decidimos não ter uma partida entre eles. Temos uma panorâmica regular para o movimento esquerdo da câmera. Portanto, para corrigir esse problema, tudo o que precisamos fazer é excluir as camadas de fundo duas cenas e colar uma na composição principal abaixo dessas duas cenas Então, agora podemos primeiro entrar na cena nove e cortar a camada de fundo a partir daqui. Depois disso, vamos para a cena oito e deletaremos a camada de fundo de lá. Uma vez feito isso, vamos até a composição principal e colamos a camada de fundo aqui Em seguida, vamos ficar no início da cena oito e trazer o fundo gradiente para começar a partir daqui Finalmente, vamos colocar a camada abaixo das duas cenas e ver como fica? Tudo bem. Isso parece ótimo. Mas notei que esse plano de fundo não parece bom na cena final. Isso está acontecendo porque temos o efeito de brilho na pré-composição do botão Normalmente, objetos brilhantes ficam melhor em fundos mais escuros. Portanto, no nosso caso, será uma boa ideia trazer aqui nossa versão do fundo escuro que criamos para a segunda e terceira cenas. Então, vamos fazer isso agora. Vamos para a segunda cena e copiemos o plano de fundo de lá. De volta à cena final, vamos colar a camada e colocá-la abaixo de todas as camadas. Como você pode ver, isso já parece muito melhor. Vamos expandir a camada de fundo e também podemos fechar essas pré-composições Ótimo. E agora vamos voltar para a composição principal e ver como isso fica Ok, eu acho que parece incrível. E com isso, terminamos de ajustar a aparência e o design das cenas Vamos agora assistir à animação desde o início para ver se perdemos alguma coisa. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca de ajuda. Conheça o One Point. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com um ponto, você tem uma visão geral clara de tudo em que sua equipe está trabalhando, todos os seus projetos, de todas as suas tarefas, tudo em um só lugar. Preciso da imagem completa. Cada projeto inclui tarefas detalhadas, subtarefas e acompanhamento do progresso em tempo real Então, nada escapa pelas fendas, pelas rachaduras, pelas rachaduras Ah. Quer ver quem está ficando para trás? Apenas. Para sua equipe toque em Visão geral da atividade de todos. Sim, como sempre, perdemos alguma coisa. No nosso caso, precisamos adicionar um fundo gradiente na cena seis Então, vamos fazer isso bem rápido. Vamos para a cena cinco para copiar o plano de fundo de lá. Ótimo. E agora vamos encontrar a cena seis e inseri-la para colar a camada. Aqui está. Vamos agora entrar na cena e colar o fundo gradiente aqui E vamos voltar à composição principal para continuar verificando a animação Preciso entrar em contato com alguém. Entre no sistema de mensagens integrado onde todas as suas conversas são organizadas por contato. Envie um lembrete rápido ou compartilhe uma atualização instantaneamente. E sim, compartilhar arquivos é fácil. Nesse momento, notei que o cursor está saindo da cena muito cedo. Está arruinando a transição do Match Cut. Então, vamos entrar na cena sete e fazer com que o cursor permaneça um pouco mais antes de sair da cena Primeiro, vamos abrir os quadros-chave da pré-composição da tela da interface do usuário e os quadros-chave do cursor para que possamos sincronizá-los entre si O cursor começa a sair da cena a partir desse momento, vamos passar para, digamos, o segundo nove e trazer a esfera aqui Agora, vamos avançar 1 segundo e trazer o último quadro-chave aqui Incrível. Portanto, agora ele corresponde à saída da tela da interface do usuário, e a última coisa que precisamos fazer é garantir que a velocidade não seja alterada na animação do cursor Eu vejo que isso mudou. Nesse caso, vamos definir a velocidade da animação externa do cursor em 95% para obter aquele movimento instantâneo extremo Vamos ver como isso parece. Tudo bem. Acho que deveria funcionar. Vamos agora voltar para a composição principal e verificar a transição Ou compartilhe uma atualização instantaneamente. E sim, compartilhar arquivos é fácil. upload de qualquer documento e toda a sua equipe terá acesso a ele imediatamente. Então, por que continuar lutando? Acesse onepoint.com e torne seu dia de trabalho mais fácil a partir de Parece bom, mas agora percebo que o cursor na cena final está em uma posição muito baixa quando pressiona o botão. Acho que devemos falar um pouco sobre isso neste momento. Então, vamos entrar na cena final e, em seguida, abrir os quadros-chave no cursor antes da composição Agora, vamos ficar nos quadros-chave da última posição e ajustar a posição do cursor neste momento . Fale um pouco sobre isso. Podemos colocá-lo no centro do botão. Vamos ver como isso parece. Incrível. Acho que parece muito melhor agora. Ótimo. E com isso, agora podemos voltar à composição principal e salvar o projeto antes de passar para a próxima etapa Desta vez, quero que melhoremos a aparência dos painéis destacáveis do projeto. Deixe-me mostrar o que quero dizer. Primeiro, vamos começar a lidar com o painel pop-up na Cena oito. Quando estivermos aqui, vamos encontrar o painel pop-up, pré-compor e adicionar um efeito de sombra projetada a ele Agora, defina a opacidade para 100, depois a distância para cinco. Em seguida, vamos definir a suavidade para um número maior. Acho que 80 parece bom. Acho que devemos definir a distância para zero. Ótimo. E agora, para fazer com que essa sombra se misture melhor com o design, podemos experimentar a cor roxa e, se parecer muito clara, podemos entrar no painel de cores e escolher uma cor um pouco mais escura Esse é um bom truque que eu sempre uso para fazer minhas sombras parecerem melhores em projetos. Tudo bem. E agora, caso você tenha muitos painéis nos quais precise aplicar essa sombra, copie-a usando a função copiar com links relativos. No nosso caso, vamos copiá-lo da maneira normal, já que temos apenas um outro painel pop-up no projeto para aplicar esse efeito. Vamos copiar o efeito e depois ir até a composição principal para encontrar essa cena Aqui está desde a cena cinco. Vamos finalizá-lo e, em seguida, entrar na tela da interface do usuário antes da composição e colar o efeito. Parece ótimo. Incrível. Então, com isso, concluímos a primeira rodada de adição de retoques finais ao projeto e podemos ir mais longe e adicionar toques finais adicionais que farão com que o projeto pareça ainda E podemos começar garantindo que todas as cenas sejam visíveis aqui na composição principal com a melhor qualidade Para fazer isso, precisamos reduzir as pré-composições que temos na linha do tempo Como você deve se lembrar, já analisamos a primeira cena antes da competição Então, agora vamos passar para a segunda cena. E antes de reduzir a pré-composição, podemos entrar primeiro na cena e verificar se as camadas nas pré-composições internas também estão reduzidas. Nesse caso, temos tudo certo. Então, vamos voltar para a composição principal e reduzir a pré-composição da cena. Ótimo. E agora vamos nos mover lentamente na linha do tempo para ver se a função de colapso não mudou nada na animação ou na aparência dessa cena Tudo parece ótimo. E agora vamos passar para a cena três. Vamos assistir a animação com atenção para ver se há alguma alteração. Parece ótimo. Vamos agora passar para a cena quatro. Como você pode notar, após o colapso dessa pré-composição, vemos algumas pequenas mudanças, especialmente no ângulo da câmera Isso está acontecendo porque dentro dessa cena, temos uma camada de câmera que não temos na composição principal fora dessa cena, a pré-composição Depois de reduzir essa pré-composição, After Effects agora age como se todas as três camadas D dentro dessa composição estivessem na linha do tempo da composição principal Mas ele ignora a câmera interna porque agora usa a câmera padrão criada automaticamente no After Effects quando uma cena tem três camadas D. No nosso caso, são as três camadas D dentro da pré-composição da cena três E como cronologicamente, a composição principal é a primeira pré-composição da linha, o After Effects usa a câmera da primeira composição na No nosso caso, a composição principal e não a câmera dentro da cena três pré-composição É assim que o After Effects funciona. Portanto, nesses tipos de situações, quando você tem três camadas D e câmeras envolvidas no projeto, é melhor não reduzir essa pré-composição específica Está totalmente bem. Você ainda terá sua cena com a melhor qualidade. Então, com isso dito, vamos passar para a próxima pré-composição. Tudo bem, podemos definitivamente reduzir as pré-composições da animação do título, já que não há três animações ou câmeras em camada D ou Vamos agora lidar com a cena cinco. podemos reduzir essa pré-composição Também podemos reduzir essa pré-composição sem nos preocupar, porque não há três camadas ou câmeras D nessa cena Mas devemos entrar em cena para verificar se todas as pré-composições e camadas internas também estão reduzidas. Vejo que não conseguimos fechar o cursor. Então, vamos fazer isso bem rápido e depois voltar para a composição principal e verificar como essa cena fica depois de desmontá-la. Hum, parece estar bem. Agora podemos seguir em frente e reduzir esta pré-composição de animação do título Tudo bem. E agora vamos analisar a próxima cena. Nesse caso, mesmo que tenhamos as três camadas D, animação acontecendo na cena, ainda acertamos tudo sem distorções da câmera E isso porque a animação da cena em três D não está acontecendo diretamente dentro dessa pré-composição de cena Isso está acontecendo dentro da pré-composição da tela da interface do usuário. Então, se derrubarmos essa pré-composição, veremos a distorção da câmera E isso é exatamente pelos mesmos motivos que expliquei anteriormente. Agora, a cena cinco vê as três camadas D dentro da pré-composição da tela da interface do usuário, mas usa a câmera padrão da linha do tempo dessa cena Ele ignora a câmera que temos dentro da pré-composição da tela da interface do usuário Portanto, não vamos resumir essa pré-composição aqui. Por que, se reduzirmos a cena cinco antes da composição na linha do tempo, nada acontecerá A linha do tempo do Master Comp não vê a câmera que está dentro da linha do tempo da tela da interface do usuário Vou continuar sem desmoroná-lo. Vamos seguir em frente. Podemos reduzir essa cena de animação do título. Tudo bem? Vamos continuar lidando com a cena sete agora. Vamos ver o momento em que podemos ver a animação de dissolução e, em seguida, reduzir essa pré-composição para ver se ela faz alguma alteração. Tudo parece bem. Mas antes de prosseguir, vamos entrar na cena e garantir que todas as pré-composições e camadas aqui estejam reduzidas Ok, agora vamos voltar para a composição do Master e verificar o resto da animação com cuidado. Parece bom. Vamos agora lidar com a cena oito. Vamos reduzi-la e assistir ao resto da animação aqui com cuidado para ver se alguma alteração desnecessária aparece após o colapso Tudo parece totalmente bem. Agora podemos seguir em frente para reduzir a próxima cena. Vamos analisar a cena nove e ver como fica. Parece bom, e agora podemos analisar a cena final e ver como fica. Incrível. Tudo parece totalmente bem. Agora, quando terminarmos, reunindo todas as cenas relevantes, vamos fazer algumas pequenas alterações e adicionar alguns detalhes finais para melhorar a aparência do projeto E podemos começar dimensionando o plano de fundo dentro da cena final Não gosto da cor brilhante na parte inferior. Então, vamos entrar na cena e ampliar a camada de fundo aqui. Vamos tentar 120. Acho que parece melhor agora. Vamos até o master comp e ver como fica. Parece muito bom. Vamos salvar o projeto antes de prosseguir. Ok, agora, neste momento do projeto, o que eu geralmente adoro fazer é revisar todas as cenas novamente, uma por uma , e pensar em coisas que eu possa adicionar ou melhorar. Por exemplo, aqui na cena três, acho que o fundo não parece bom. Vamos entrar nessa pré-composição e primeiro tentar girar o fundo em 180 graus, que a área clara fique na parte Dessa forma, obteremos uma visão mais contínua da cena anterior. Esse foi um exemplo de um pequeno ajuste que podemos fazer para deixar a animação um pouco melhor. Mas também há outras coisas um pouco mais sérias que podemos fazer para melhorar a aparência da animação. Por exemplo, aqui na segunda cena, toda essa sequência parece muito estática, na minha opinião. Podemos melhorar facilmente essa cena adicionando uma animação de zoom in ou zoom out. Deixe-me mostrar o que quero dizer. Vamos ficar no início dessa cena e abrir a propriedade de escala. Agora, crie um quadro-chave aqui. Vamos agora abrir a posição e fazer o mesmo. Agora vamos pressionar você para ver todos os quadros-chave e ir até o ponto no tempo em que o cursor toca a caixa de tarefas seguida, dimensionar essa pré-composição e posicioná-la. Então, parece um zoom na animação. Ótimo. Feito isso, vamos agora criar uma animação de redução de zoom no momento em que o cursor está pairando no ar Para saber exatamente quando isso acontece, podemos entrar na cena e abrir os quadros-chave do cursor Agora podemos encontrar o momento de pairar e, enquanto estamos aqui, voltar para a composição principal e ajustar a escala e quadros-chave de posição para obter a ilusão de movimento da câmera com zoom out Ou talvez, em vez de diminuir o zoom, possamos criar outra animação de zoom Vamos tentar isso. Podemos definir a escala para 260. E agora vamos posicionar a pré-composição forma que o cursor fique centralizado Podemos usar a grade de ação segura para Ok, isso parece bom o suficiente. Depois disso, vamos entrar na cena novamente e ficar nos próximos quadros-chave do cursor , onde ele toca o balão de mensagem Agora, vamos voltar à composição principal e criar uma animação com zoom out Incrível. Uma vez feito isso, vamos voltar à cena para ver a próxima parada do cursor. Vamos ficar neste momento e, na composição principal, criar outra animação Zoom in Vamos também levar a pré-composição para o centro em algum lugar por aqui Ótimo. E agora, na última posição do cursor, que é a animação externa, podemos trazer de volta a pré-composição na composição principal para a Vamos ficar no final da cena e depois copiar os dois primeiros quadros-chave e colá-los aqui. Dessa forma, não arruinaremos a transição de match cut que temos aqui Ótimo. Então, quando terminarmos a animação inicial, vamos melhorar o movimento. Vamos selecionar os quadros-chave de posição e definir a velocidade para 85% Vamos fazer o mesmo com a balança. Ok, agora vamos ficar aqui e pressionar B para iniciar a área de trabalho a partir desse momento e , em seguida, ir até o final da cena e pressionar N para finalizar a área de trabalho nesse ponto. Dessa forma, o After Effects renderizará a cena mais rapidamente. Também vamos usar essa oportunidade para eliminar o projeto. A função de limpeza limpa memória em cache e o espaço em disco para liberar recursos e Tudo bem, agora vamos ver o que temos. Espero que você aprenda com esse processo que nem sempre é necessário usar câmeras na cena para criar movimentos de câmera. Você pode fazer isso animando a pré-composição em sua composição principal, como fizemos aqui Ok, eu acho que está ótimo. E agora podemos salvar o projeto e trazer tudo de volta ao normal antes de seguir em frente. Tudo bem, agora vamos adicionar um pouco de zoom e animação suaves à próxima cena para que pareça menos estática Para isso, tudo o que precisamos fazer é criar quadros-chave de escala no início da cena e, em seguida, ir até o final dessa pré-composição e definir a escala, digamos, digamos Vamos agora ver como isso parece. Parece ótimo. E agora eu quero adicionar um pequeno toque final adicional à cena para torná-la um pouco mais interessante. 26. Toques finais, música e animações de texto: De volta. Então, depois de lidarmos com a maioria dos ajustes na animação e no design das cenas, é hora de dar o toque final e adicionar os retoques finais restantes do projeto, como animar as camadas de texto e as cenas, adicionar música e melhorar a aparência de algumas cenas usando recursos de design adicionais Na minha opinião, é o momento mais divertido em que o projeto está 95% concluído, e agora estamos nos divertindo fazendo os retoques finais Com isso dito, vamos primeiro começar a lidar com todas as camadas de texto que temos nas cenas de animação de fluxo de demonstração, começando com a cena quatro. Então, vamos entrar em cena. E primeiro, encontre a camada de texto que precisamos animar. Depois de encontrá-la, vamos economizar tempo copiando a animação de texto que fizemos para a camada de texto na primeira cena. Como você pode ver, temos aqui uma boa animação de texto revelado que criamos, e fizemos isso usando um animador, então vamos abrir a camada e selecionar esse animador para copiá-la Ótimo. Feito isso, vamos voltar à cena quatro e colá-la na camada de texto que temos aqui. Primeiro, fique no início dessa camada e depois cole o animador Dessa forma, a animação desse animador começará do início da camada de texto Tudo bem. E agora vamos abrir o animador e ajustar o valor da propriedade de posição que temos no seletor de intervalo Vamos configurá-lo para 80. Incrível. E agora vamos ficar em algum lugar depois da animação e criar uma nova máscara para essa camada de texto. Agradável. Então, agora criamos a animação de revelação de texto para essa camada de texto. Agora, vamos abrir os quadros-chave e garantir que a animação termine na décima segunda E agora precisamos criar uma animação Outro para esse texto. Para simplificar, vamos ficar no segundo 11 e usar a propriedade position para tirar essa camada da moldura a partir da parte superior. Agora vamos facilitar os quadros-chave e fazer com que a animação comece a se mover lentamente e ganhe velocidade no final Incrível. E agora podemos lidar com a segunda camada de texto que temos na cena. Para isso, agora podemos copiar o animador que temos na primeira camada de texto e colá-lo na segunda Em seguida, vamos ficar aqui e criar uma nova máscara. Uma vez feito isso, vamos agora encontrar um bom momento em que podemos criar a animação externa para essa camada de texto Acho que podemos começar a partir do segundo 16, e é porque a animação externa da câmera começa aqui Podemos combinar a animação externa do texto com ela. Então, vamos criar os quadros-chave da primeira posição para a segunda camada de texto aqui e, em seguida, ir para a segunda 17 e tirá-la do quadro a partir do topo Finalmente, vamos ajustar o movimento. E agora, antes de continuar, vamos ver a animação que criamos. Para facilitar nossa vida, vamos isolar apenas as duas camadas de texto e verificar a animação Incrível. Acho que parece ótimo, e agora podemos salvar o projeto e passar a lidar com a próxima cena, que é a cena cinco. Vamos trazer a cena cinco aqui antes da cena seis, e agora ficar no início da camada de texto e colar o animador Em seguida, vamos nos levantar após a conclusão da animação e criar uma nova máscara. E agora precisamos criar um Outro. Portanto, se a camada de texto terminar nos segundos quatro e dez quadros , ficarei nos segundos três e dez quadros e criarei o quadro-chave da primeira posição aqui Agora, vamos até o final da camada e, dessa vez, tirar essa camada de texto essa camada de texto da cena pela parte inferior. Agora vamos ajustar o movimento e ver como fica. Acho que desta vez o movimento deve começar rápido. Então, vamos ajustar a velocidade dos quadros-chave. Incrível. Isso é melhor. E agora vamos lidar com a segunda camada de texto que temos aqui. Desta vez, como a animação externa da cena acontece a partir da oitava segunda, vamos começar a animação externa da segunda camada de texto a partir daqui também para combiná-la Ok, isso parece bom, e estamos prontos para passar para a cena seis. Vamos primeiro passar pelo animador. Agora, vamos ficar aqui e usar o atalho de controle shift in para criar a máscara Acho que a tela da interface do usuário está muito próxima do texto. Vamos tentar consertar isso. Para isso, precisamos inserir a pré-composição dos contatos e agora podemos ajustar a animação nula ou ajustar a animação da câmera Vamos começar com a câmera. Primeiro, precisamos nos posicionar no quadro-chave do momento problemático que está aqui Agora vamos mover a câmera um pouco para trás. Acho que podemos movê-lo ainda mais. Vamos também movê-lo um pouco para baixo. Ok, agora, enquanto estamos aqui, vamos voltar à cena principal e começar a criar a animação externa para o texto a partir deste momento para combiná-la com a animação externa da câmera Finalmente, vamos ajustar o movimento e ver como fica. Ótimo. Então, agora vamos salvar o projeto e passar para a cena sete. Aqui podemos fazer algo interessante para a primeira camada de texto. Como a tela da interface do usuário cobre todo o quadro, podemos colocar a camada de texto abaixo dela no painel de camadas e, dessa forma, criar uma animação reveladora para esse texto no início da cena Como você pode ver, isso parece muito bom. Tudo bem E agora vamos criar uma animação externa para esse texto. Podemos criar o quadro-chave da primeira posição aqui, depois retroceder 1 segundo e criar o mesmo quadro-chave aqui Agora podemos voltar ao segundo quadro-chave e mover o texto para fora do quadro a partir da parte superior Agora, vamos ajustar o movimento e depois passar para a próxima camada de texto. Para este, precisamos criar a animação de introdução que criamos para o resto das camadas de texto no projeto Então, vamos fazer isso bem rápido. Tudo bem E agora, para o Otro, não precisamos fazer nada, pois a tela da interface do usuário está cobrindo essa camada de texto Então, tudo o que precisamos fazer agora é lidar com a última camada de texto. Então, primeiro, vamos criar a animação de revelação para a introdução Uma vez feito isso, vamos agora criar o Outro. Isso deve começar a partir do segundo nove. Vamos estender a camada de texto antes de animar a posição do Outro. Ok. E agora vamos criar a animação Otro para Incrível. Então, agora vamos passar para a cena oito e ver se há alguma camada de texto que precisamos animar aqui Como você pode ver, não temos nenhuma camada de texto aqui. Então, vamos para a cena nove para verificar se há alguma lá. Não há nada aqui. Vamos até a cena final para garantir que também não haja nenhuma camada de texto nela. Tudo bem. Então, com isso feito, terminamos de criar a animação de texto para as cenas e podemos salvar o projeto agora para garantir o progresso que fizemos. E agora, neste ponto do processo, geralmente adoro verificar novamente minhas cenas e ver se há algum ajuste adicional que eu possa fazer, seja na animação ou no design das cenas, por exemplo, na cena cinco Percebi que a animação que aparece pode durar um pouco mais Quero que termine logo antes do início da saída da camada de texto É porque estou tentando fazer com que minhas cenas sempre pareçam em movimento. Tente criar o mínimo possível de momentos estáticos. Esse é o segredo para uma boa animação de motion design. Com isso dito, vamos inserir as tarefas pré-comp e agora abrir todos os quadros-chave das caixas de tarefas Agora, vamos ficar na segunda quinta. Em seguida, selecione todos os quadros-chave. Em seguida, mantenha pressionada a tecla Alt ou option e mova os últimos quadros-chave Ótimo. E agora vamos voltar para a cena principal e ver como isso parece. Opa, essa é a cena errada. Precisamos da cena cinco. Ok, vamos ver como fica a animação agora. Na minha opinião, depois dessa pequena mudança, a moção parece muito melhor. Feito isso, vamos agora para a cena quatro e verificar novamente o que podemos melhorar ou adicionar aqui Nessa cena, eu adoraria aumentar o efeito de profundidade de campo que criamos aqui. Vamos analisar esses quadros-chave e escalar o nível de desfoque para um número maior. Isso é demais. Para ser honesto, eu não amo a aparência. Vamos trazê-lo de volta para 300. Talvez vamos tentar aumentar o nível de desfoque na parte final da animação dessa cena em que vemos as tarefas Vamos tentar 300 aqui também. 300 parece melhor, mas eu ainda acho que é demais. Vamos tentar 200. Sim, 200 parece perfeito. Estou mostrando esse processo para que você também possa se acostumar a fazer alguns ajustes finais em seus projetos antes de renderizar a animação Adoro fazer isso porque sempre há algo que podemos fazer para melhorar um pouco mais a animação. É por isso que a fase de retoques finais é a minha favorita. Tudo bem Com isso dito, vamos agora seguir em frente e, desta vez, tentar melhorar a cena três. Vamos ver o que temos aqui. Tudo bem. Acho que a primeira coisa que eu adoraria fazer aqui é fazer com que a animação de digitação dure um pouco mais Vamos ficar na segunda segunda e trazer o último quadro-chave aqui Agora vamos aproveitar essa oportunidade e ir para a cena sete, onde temos outra animação de digitação de texto e fazemos com que essa animação dure mais aqui também Vamos primeiro abrir os quadros-chave nessa camada. E agora vamos ficar nos segundos sete e dez quadros e mover o último quadro-chave aqui Incrível. E agora, uma vez feito isso, vamos agora para a segunda cena e ver o que podemos fazer lá para melhorar o movimento ou o design dessa cena. Tudo bem, agora, como o objetivo principal nessa cena é mostrar o caos de ter muitas mensagens e tarefas para lidar, pode ser uma boa ideia adicionar caixas de tarefas e balões de mensagens adicionais para combinar o conceito dessa cena. E faremos isso em breve. Antes disso, eu adoraria fazer com que a cor de fundo dessa cena não fosse escura. Eu quero que o escuro seja para a cena três, para que pareça uma espécie de oceano profundo. Desde aquele momento, a voz em off diz: Você está se afogando no Ok, então com isso dito, vamos primeiro excluir as curvas nos efeitos de toner da camada de fundo Ótimo. E agora vamos adicionar caixas de tarefas e balões de mensagens adicionais à cena Mas, em vez de duplicá-los aqui, quero mostrar outro método que pode ser um pouco mais útil para nós neste projeto Dessa forma, você pode aprender um novo truque e aplicá-lo aos seus projetos, se quiser. Tudo bem Então, primeiro, pressione Catrol ou Command end para criar uma nova composição Vamos chamá-lo de dois BG. Porque é a segunda cena e , em seguida, adicione BG no final, pois fará parte do plano de fundo dessa cena. Agora, verifique se as dimensões estão corretas e defina a duração para 2 minutos. Tudo bem. E agora vamos voltar à cena dois e selecionar as tarefas e as mensagens pré-compostas que temos aqui Agora copie-os e cole-os em nossa nova composição. Em seguida, pressione e exclua todos os quadros-chave que temos aqui e agora começaremos a duplicá-los para criar essa sensação de caos Mas antes disso, precisamos ter certeza de que não colocaremos as novas duplicatas nessas áreas Onde, na cena principal, temos essas quatro pré-composições posicionadas. Para isso, vamos garantir que nenhuma camada esteja selecionada e criar um retângulo para marcar a área de mensagens Em seguida, vamos marcar também a área de tarefas. Uma vez feito isso, agora podemos diminuir a opacidade da camada de forma e bloqueá-la para que ela não interfira conosco Ao fazer isso, agora sabemos que essas áreas são onde não devemos colocar as novas duplicatas que criaremos em um segundo Então, primeiro, podemos mover as pré-composições atuais para fora dessas áreas e, em seguida, vamos começar a duplicá-las para criar uma Vou acelerar esse processo um pouco. Tudo bem Então, quando terminarmos com isso, podemos realmente cancelar a função de colapso para todas as pré-composições, já que estamos planejando usar essa composição como parte da camada de fundo Não precisamos ter todos eles em altíssima qualidade. Estou fazendo isso para tornar meu tempo de renderização um pouco mais rápido. Ok. E agora vamos desativar a camada-guia que criamos aqui e depois estender as camadas para que durem até o final da linha do tempo Ótimo. E agora vamos adicionar uma nova camada de ajuste na cena e adicionar o desfoque rápido da caixa para deixar essa composição embaçada Dessa forma, ficará melhor na cena principal. Em breve, você entenderá o que quero dizer com isso. Por enquanto, vamos voltar à composição da cena principal e, em seguida, trazer a nova pré-composição de fundo acabamos de criar para Posicione-o acima da camada de fundo gradiente. Acho que devemos ajustar o desfoque. Para isso, vamos entrar na pré-composição e cortar o efeito de desfoque rápido da caixa da camada de ajuste Podemos excluir a camada de ajuste aqui. Agora, vamos voltar à cena principal e colar o efeito na pré-composição Dessa forma, será mais fácil controlar o efeito. Eu queria te mostrar isso para que você soubesse que às vezes é melhor usar um efeito na pré-composição em vez de usar camadas de ajuste E esse foi um ótimo exemplo dessa situação. E agora, para que ele se misture ainda mais com a cena, podemos escolher um modo de mesclagem diferente para essa pré-composição Em vez de escolher o modo de mesclagem correto, manualmente, podemos usar o atalho para alternar entre Mantenha pressionada a tecla Shift e pressione a tecla de mais ou menos. Tudo bem Então, depois de verificar todos os modos de mesclagem, acho que a sobreposição fica melhor no nosso caso E agora, se voltarmos à composição principal para ver como isso fica com o movimento da câmera que criamos aqui, para essa cena, teremos uma aparência super legal Entendemos o caos, mas ainda assim a cena parece muito equilibrada e limpa. Ótimo. Agora, depois de ajustar o visual do projeto e de termos toda a animação perfeitamente sincronizada com a narração, podemos passar para a próxima etapa, que é adicionar música ao que é adicionar Para isso, vá até a pasta de ativos que você baixou para mim. E aqui você encontra a música que encontrei para este projeto. Encontrei essa faixa na biblioteca de áudio do YouTube, que é de código aberto. Isso significa que 99% das faixas que você encontrará lá são de uso gratuito sem problemas de direitos autorais e royalties Você pode usá-los para fins comerciais. Quando procuro uma faixa, geralmente primeiro filtro a lista pelo humor certo. Nesse caso, acho que o funky se encaixará no ritmo da minha animação Obviamente, é uma boa ideia escolher três músicas e dar ao cliente a opção de escolher. Quando procuro a música certa, estou tentando encontrar uma faixa que tenha uma espécie de seção de construção no início. A música deve começar com algum tipo de introdução que acrescente mais interesse à animação Então, neste momento, estou apenas ouvindo todas as faixas que vejo na primeira página e, depois de encontrar a correta, é muito importante verificar se ela tem o ícone do YouTube. Isso significa que é gratuito para qualquer finalidade sem a necessidade de adicionar créditos para o criador da música Só então você pode baixá-lo sem se preocupar com reivindicações de direitos autorais Tudo bem, de volta ao projeto. Agora vamos arrastar a faixa até nossa linha do tempo e ver se ela se encaixa nas vibrações Mas antes disso, vamos ao painel do projeto e organizá-lo um pouco. Podemos colocar a faixa na pasta Assets e também podemos colocar essa pré-composição na pasta PreComs na pasta PreComs Ótimo. E agora vamos ouvir isso. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens. E antes que você perceba, você está se afogando no caos. Como você deve ter notado, o volume da faixa está muito alto. Portanto, precisamos ajustá-lo para caber na narração. Para isso, pressione a tecla. Agora podemos ver os níveis de áudio. Vamos configurá-lo para -25 e ouvi-lo novamente. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca Conheci um ponto. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com um ponto, você ganha um aplauso de cristal. Dash. Ok, isso é melhor. Mas acho que podemos configurá-lo para -20, então o volume da faixa será um pouco maior Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca de ajuda. Conheci um ponto. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com um ponto, você tem uma visão geral clara de tudo o que sua equipe está trabalhando em todos os seus projetos. G. Ótimo. Isso é perfeito. Feito isso, vamos agora fechar todas as pré-composições que temos aqui e, logo depois, ir ao painel Projeto para organizá-las antes da renderização Organizar é muito importante, não só para você, mas também para uma pessoa que possa trabalhar com você neste projeto. Talvez você trabalhe com outro freelancer ou talvez trabalhe em uma empresa com outro colega De qualquer forma, ter um projeto bem organizado posicionará sob uma luz profissional muito boa. Com isso dito, vamos abrir a pasta precomp e começar a organizá-la primeiro Vamos ver o que temos na pasta da tela. Tudo parece bem aqui. Vamos ver o que temos na pasta de painéis. Aqui, eu adoraria ajustar os nomes dos precoms. Em vez de S one, vamos alterá-lo para a tela um. E é porque notei que todas as outras pré-composições de painéis começam com o nome completo da tela Ótimo. E agora vamos fazer o mesmo com o resto das pré-composições aqui. Feito isso, vamos agora para a pasta de pré-composições e selecionar todos os painéis de tela e pré-composições de ativos que criamos para colocar na Dessa forma, na pasta precoms, temos apenas as pré-composições gerais que usamos Você pode ir mais longe e criar uma nova pasta dentro da pasta pre cooms para os títulos principais, mas não temos muitos deles, então vou mantê-la como está Incrível. E agora vamos abrir a pasta de ativos e ver se há algo que possamos organizar aqui. Tudo bem. Acho que está tudo bem aqui, e agora estamos prontos para renderizar o projeto. E para obter a melhor qualidade em termos de cores para nosso arquivo de renderização final, podemos inserir as configurações do projeto aqui e alterar a profundidade de bits para 16 ou 32 bits. Se você usar efeitos de brilho no projeto, usar 32 bits pode afetar a aparência dessas cenas, então preste atenção nisso Observe que quanto mais bits por canal você escolher, lentos serão os tempos de renderização, porque o After Effects agora precisará renderizar uma variedade maior de cores Ok. Agora vamos ativar a função de desfoque de movimento aqui na linha do tempo principal Para que possamos obter o desfoque de movimento, nós o ativamos dentro do pré-fone E agora vamos fazer uma última coisa antes de renderizar o projeto, que é limpá-lo. Dessa forma, reduziremos o risco de erros inesperados de software durante a renderização Ótimo. Com tudo isso feito, vamos agora ter certeza de que estamos selecionando a composição mestre no painel do projeto e, em seguida, ir para a composição e adicionar essa linha do tempo à fila de renderização Aqui, vamos escolher renderizá-lo em 40 megabits por segundo, porque isso nos dará uma qualidade um pouco maior para o arquivo final Se você não o vê aqui, basta clicar em Módulo de Saída e, em seguida, em formato, escolher Ht 264 Em seguida, vá para Opções de formato e defina as configurações de taxa de bits conforme apresentadas aqui Tudo bem E agora vamos escolher onde renderizar o arquivo. Vou renderizá-lo na pasta das finais. Não se esqueça de ajustar o nome do arquivo. Vamos chamá-lo de SAS Project Version 01. Incrível. E agora vamos apertar o botão de renderização e esperar alguns minutos. Vou acelerar esse processo. E agora vamos assistir à animação algumas vezes para ter uma visão clara se precisarmos ajustar ou corrigir alguma coisa. Gerenciar uma grande equipe em vários projetos não é fácil. Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca de ajuda. Conheça o One Point. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com o One Point, você tem uma visão geral clara de tudo em que sua equipe está trabalhando, todos os seus projetos, todas as suas tarefas, tudo em um só lugar. Preciso da imagem completa. Cada projeto inclui tarefas detalhadas, subtarefas e acompanhamento do progresso em tempo real, para que nada passe despercebido Quer ver quem está ficando para trás, acesse a guia da sua equipe para ver as atividades de todos em um piscar Preciso entrar em contato com alguém. Entre no sistema de mensagens integrado, onde todas as suas conversas são organizadas por contato. Envie um lembrete rápido ou compartilhe uma atualização instantaneamente. E sim, compartilhar arquivos é fácil. upload de qualquer documento e toda a sua equipe terá acesso a ele imediatamente. Então, por que continuar lutando? Acesse onepoint.com e torne seu dia de trabalho mais fácil Gerenciar uma grande equipe em vários projetos não é fácil. Muitas tarefas, muitas mensagens e, antes que você perceba, você está se afogando no caos em busca Conheci One Point. A plataforma que torna o gerenciamento de projetos tão simples até mesmo seu gato poderia fazer isso. Com o One Point, você tem uma visão geral clara de tudo em que sua equipe está trabalhando, todos os seus projetos, todas as suas tarefas, tudo em um só lugar. Preciso da imagem completa. Cada projeto inclui tarefas detalhadas, subtarefas e acompanhamento do progresso em tempo real, para que nada passe despercebido Quer ver quem está ficando para trás, acesse a guia da sua equipe para ver as atividades de todos em um piscar Preciso entrar em contato com alguém. Entre no sistema de mensagens integrado onde todas as suas conversas são organizadas por contato. Envie um lembrete rápido ou compartilhe uma atualização instantaneamente. E sim, compartilhar arquivos é fácil. upload de qualquer documento e toda a sua equipe terá acesso a ele imediatamente. Então, vários projetos do WAS estão bem. Então, depois de assistir à animação algumas vezes, eu tenho um pequeno ajuste que eu quero fazer. Na cena final, a animação de introdução do objeto cursor está entrando na cena pelo centro e acho que não parece boa Então, vamos entrar na cena e ajustar a posição do cursor no início da cena. Verifique se você está na primeira posição dos quadros-chave e só então mova-os Vamos movê-lo para a direita. você não esteja exatamente nos quadros-chave, você pode criar quadros-chave adicionais , como eu fiz no meu Então, agora vou excluir o primeiro quadro-chave e colocar o novo lá. Vamos ver como isso parece. Ok, acho que parece um pouco melhor agora. Vamos agora voltar para a composição principal e entrar na terceira cena, porque eu também notei que há um momento em que o cursor para completamente e eu não gostei Isso acontece aqui após a animação de introdução. Se entrarmos no editor gráfico, veremos que a velocidade nesse momento é zero. Então, vamos corrigir isso rapidamente convertendo esse quadro-chave em um quadro-chave contínuo e, em seguida, acelerando , convertendo esse quadro-chave em um quadro-chave contínuo e, em seguida, acelerando esse momento. Acho que está melhor agora. Vamos ver isso com o resto da cena. Ótimo. Eu acho que parece incrível agora. Tudo bem. Agora, quando estivermos satisfeitos com o movimento, podemos renderizar a composição principal novamente. Mas antes de fazer isso, quero aproveitar esta oportunidade e mostrar como adicionar fotos realistas de perfil de Avatar no projeto, já que não queria perder tempo com isso em todas as cenas que precisam de uma foto de perfil de avatar, certifiquei-me de ter pelo menos uma cena apenas para mostrar o processo por trás dela. Você deve se lembrar que, durante o processo de preparação no Illustrator, quando preparamos a cena seis, observei que, nessa cena específica deixarei os ícones do perfil do Avatar como camadas separadas porque os usaremos posteriormente no projeto Então, agora isso é exatamente o que eu quero que façamos. Agora, aprenderemos como adicionar fotos reais do perfil do Avatar no design do painel da interface do usuário. Vamos abrir a pasta de ativos que você baixou para mim e encontrar os retratos do nome do arquivo PSD Agora, quero mostrar como adoro preparar meus avatares para animação Em primeiro lugar, vou ao site do freepick porque você pode encontrar muitas coisas úteis aqui gratuitamente Agora, na barra de pesquisa, procurarei retratos Então, vou me certificar de ver apenas as opções gratuitas. E agora estou verificando quais opções eu vejo aqui. Em seguida, escolherei algo de que goste e , ao mesmo tempo , garantirei que haja muitas outras opções semelhantes a esta. É importante porque queremos ter um design consistente, veja nosso projeto. Tudo bem? Então, nesse caso, eu amo essa foto. Então, vou clicar nele. E então, se quiser, você já pode prepará-lo para animação diretamente no Free Pick. Você pode se livrar do plano de fundo ou escolher qualquer outro formato. No meu caso, como sei que precisarei ter muitos deles , prefiro tê-los prontos para animação em um único arquivo. Podemos usar o Photoshop para isso, mas falaremos mais sobre isso mais tarde. Por enquanto, continuo baixando o resto dos avatares Nesse caso, preciso ter sete deles no total. Então, agora vou primeiro criar uma nova pasta na qual salvarei todos os avatares que baixei daqui Vou acelerar esse processo por enquanto. Tudo bem Então, quando eu terminar de baixar todas as imagens, vou abrir o Photoshop e criar um novo documento Podemos usar as predefinições de arte e ilustração para isso, pois já existe um formato quadrado preparado para nós A vantagem de ter todas as imagens em um arquivo é que elas terão o mesmo tamanho. Isso facilitará nossa vida no After Effects quando precisarmos usá-los. Em breve, você verá o que quero dizer. Ok, agora vou trazer todas as imagens para dentro. E então, enquanto todos eles estiverem selecionados, pressionarei Control ou Command T para aumentá-los. Feito isso, vou agora verificar se estão todos posicionados no centro Essa também é uma das vantagens de reunir todas elas em um arquivo do Photoshop, porque se você tiver imagens com dimensões diferentes, poderá ajustá-las todas para que tenham as mesmas dimensões aqui neste arquivo, escalando algumas delas ou movendo-as da esquerda para a direita, se Tudo bem Agora, depois de me certificar de que tenho todas as imagens alinhadas, agora posso excluir a camada de fundo e salvar esse arquivo na minha pasta de ativos Vou me certificar de que estou salvando como um arquivo PSD e, em seguida, clique em Salvar Ótimo. Então, agora vamos voltar ao nosso projeto. Primeiro, vamos arrastar o arquivo PSD para o painel do projeto. Agora, no tipo de importação, escolheremos a composição para manter os tamanhos das camadas, pois precisamos de todas as camadas separadas, como no documento original do Photoshop Aqui, não importa o que escolher, pois não usamos nenhum efeito ou estilo de camada no documento original do Photoshop Ok, agora, antes de começarmos a trabalhar, vamos trazer a nova pasta que consiste em todas as imagens para a pasta de ativos. Agora vamos selecionar a pré-composição de retratos que foi criada automaticamente quando inserimos o arquivo PSD e parar de funcionar por um segundo, porque quero mencionar algo importante Como você deve ter notado, quando importamos um arquivo PSD para o After Effects, obtemos uma pré-composição contendo as imagens E também uma pasta contendo as imagens. Agora, quero explicar o que exatamente aconteceu quando optamos por importar o arquivo PSD como uma composição com retenção do tamanho da camada After Effects criou uma pré-composição com as dimensões do documento quadrado que criamos no Photoshop Mas as imagens dentro dessa pré-composição terão o tamanho de suas dimensões originais Isso é o que significa reter o tamanho da camada. After Effects não corta as imagens no formato quadrado. Portanto, se você entrar na pré-composição, notará que todas as imagens não estão em formato quadrado Eles também aparecem dessa forma na pasta das imagens. Eu queria mostrar isso para que você possa entender o verdadeiro significado por trás de reter o tamanho da camada. No nosso caso, isso realmente não importa, porque mesmo todas as imagens não sejam cortadas em um formato quadrado, ainda podemos trabalhar com elas, pois elas são mais ou menos do mesmo tamanho Mas em projetos em que você precisa que sejam todos do mesmo tamanho, você deve importá-los apenas como composição. Tudo bem. Com isso aprendido, vamos arrastar essa pré-composição para a pasta precomps para manter um projeto limpo e, em seguida, vamos abrir a pasta de retratos que acabamos de arrastar para a pasta Assets e começar a adicionar as imagens ao Assets e começar a adicionar as design do painel da interface do usuário Como você pode ver , será mais fácil escolher as imagens do avatar. Ok. Então, agora vamos selecionar todas as pré-composições de contato na linha do tempo e clicar duas vezes sobre elas para abri-las todas Ótimo. E agora vamos começar com o contato um. Em primeiro lugar, precisamos encontrar a imagem de um homem, já que o nome que temos aqui é o nome de um homem. Vamos usar esse. Arraste-o até a linha do tempo e, em seguida, reduza-o para se adequar ao design Agora vamos arrastá-lo para a área do ícone do Avatar. Podemos reduzi-lo um pouco mais. Ótimo. E agora usaremos a forma da camada do ícone Avatar como máscara para a imagem, e faremos isso usando a função track Matt. Tudo o que precisamos fazer é fazer com que a imagem use a camada de ícones do Alfa do Avatar. E agora, como sabemos que essa pré-composição é animada em três espaços D, também precisamos converter a imagem em uma camada de três D. Incrível. Agora podemos ampliar e ajustar ainda mais a posição e a escala, se necessário. Tudo bem E agora, para repetir esse processo mais rápido, vamos copiar a camada de imagem que temos aqui, depois ir para a próxima pré-composição de contato e colar Agora, vamos ajustar a posição e, em seguida, fazer com que essa camada use a camada do ícone Avatar como máscara. Então, vamos encontrar outra imagem de homem e alternar entre elas. Então, enquanto a camada da imagem é selecionada na linha do tempo, vamos arrastar essa imagem para cima dela enquanto pressiona a tecla Alt ou a opção Finalmente, vamos ajustar a posição e a escala, se necessário. Incrível. E agora vamos repetir esse processo para o próximo contato antes da composição. Primeiro, precisamos colar a primeira imagem copiada e depois substituí-la pela nova, como fizemos alguns segundos atrás Ok, então vamos repetir esse processo para o resto das pré-composições de contato Vou acelerar esse processo por enquanto. Apenas certifique-se de que a imagem se encaixa no Alright, para que, quando terminarmos, possamos segurar comando W do controlador para fechar as pré-composições de contato Como você pode ver, agora temos uma cena legal com as fotos reais do perfil do Avatar. E agora você sabe como fazer isso em seus projetos futuros. Agora vamos salvar o projeto para garantir o progresso que fizemos até agora. E com isso feito, concluímos a criação todo o vídeo explicativo do SAS. Agora estamos prontos para renderizar a versão final. Então, vamos selecionar a composição principal e enviá-la para a fila de renderização Vamos manter as mesmas configurações de renderização e substituir o arquivo antigo pelo novo. Agora, vamos esperar até que a renderização termine. Uma vez feito isso, você terá um projeto muito impressionante para mostrar em seu portfólio e compartilhar com seus futuros clientes Com isso dito, agora você pode fechar o Illustrator se ele estiver aberto Também podemos fechar o arquivo Figma e os arquivos PDF que usamos para o projeto Espero que você tenha gostado deste e aprendido muitas coisas novas e interessantes. A principal coisa que eu gostaria que você lembrasse deste curso é que criar uma peça de design de movimento é um processo de criação passo a passo. Tente sempre dar um passo cada vez e confiar no processo. Muito obrigado por assistir. Te vejo na próxima.