Cavalaria para iniciantes: como animar UIs de software/site/aplicativo como um profissional

1. Introdução: Se você já assistiu a um anúncio de um software, aplicativo ou plataforma SAS como Base 44 Weeks, Canva, Figma, provavelmente notou alguma Todas as animações parecem muito suaves, cinematográficas, e cada decisão, cada ação parece As animações fazem com que o produto tenha uma aparência bacana. Um botão é clicado e outros elementos da interface do usuário reagem à medida que a visualização gira, todos os tipos de elementos da interface do usuário reagem às interações para mostrar o que o software pode fazer em Então, como eles fazem isso? eles criam essas animações O que a maioria das pessoas não percebe é que esse tipo de animação não precisa de uma grande equipe de pessoas. Não requer efeitos do Adobe After nem anos de experiência em design de movimento. É necessário conhecer a ferramenta certa e a abordagem correta que permitirão criar duas animações D complexas muito rapidamente E essa é a ferramenta que vou te ensinar hoje. Nesta aula, vamos criar uma dessas animações do zero usando uma ferramenta gratuita de design e animação em dois D chamada Cavalry Deixe-me mostrar o que vamos fazer. Para você se familiarizar com as ferramentas que a Cavalry tem a oferecer, começaremos com um simples botão de inscrição Vamos usar as ferramentas de formas nativas da cavalaria e, em seguida, adicionaremos ícone de notificação, criaremos uma sombra projetada e, em seguida, animaremos o cursor do mouse que percorre um caminho curvo e clica no botão com uma reação visual Em seguida, passaremos para o próximo nível, onde criaremos dois cartões de interface de usuário, um cartão de perfil de usuário e um cartão de mensagem. E então vamos criar uma manchete de notícias que se parece com um daqueles títulos da CNBC ou da Bloomberg você vê em seus documentários, e então vamos animar toda a sequência Este é um projeto relativamente simples , mas elegante, que apresentará algumas das ferramentas mais usadas na Cavalaria Cada técnica se baseia na anterior e, no final, você terá uma interface de usuário finalizada que mostrará aos clientes em potencial e as habilidades para criar animações interessantes para seu próprio produto SAS ou software Meu nome é Ken e ensino design de UI UX. Web design e três modelagens em D no Skillshare e Isso é cavalaria para iniciantes, da maneira prática. Você está pronto? Se você estiver pronto, vamos começar. 2. visão geral da cavalaria: Só para ter uma visão geral rápida do que estamos vendo antes de começarmos. Se você já usou algum software de edição de vídeo antes, provavelmente já entendeu maior parte do que falaremos aqui. Então, é claro, essa é a prancheta e essa é a sua cena É aqui que você adicionará elementos e os animará. E conforme você adiciona elementos, eles aparecerão aqui na janela da cena, e é aqui que eles aparecem como camadas. Essas são camadas. E essa é a linha do tempo. É aqui que você gerencia as cores. Portanto, se você tiver um objeto selecionado, poderá alterar sua cor aqui. Mas eu raramente uso esse lado. Eu apenas vou para os atributos porque quando você seleciona algo aqui, seus atributos aparecem aqui e você pode alterar muitos aspectos. Por exemplo, podemos ir até a cor do campo clicar nela e alterá-la aqui. Esse é o item selecionado. Esses são apenas atalhos que a equipe de cavalaria colocou aqui para os recursos mais usados, deformadores comumente usados Então, eles pensaram em torná-los acessíveis ao usuário aqui mesmo. Então, esses são atalhos, e vamos ver como usar alguns deles enquanto trabalhamos em nosso projeto Finalmente, você já percebeu que para desenhar esses retângulos, selecionei essa ferramenta de retângulo e comecei a Essas são as diferentes formas que você pode desenhar. E, claro, na aula, veremos como usar algumas dessas formas para desenhar nossos componentes de interface do usuário. Então, essa é apenas uma visão geral rápida do que você precisa saber sobre a interface do usuário. A outra coisa que eu quero que vejamos é como criar uma nova pasta de projeto. Então, sempre que você quiser iniciar um novo projeto, um novo projeto de cavalaria, um novo projeto de cavalaria, você quer ter certeza de que o projeto está em sua própria pasta para que tudo em que você trabalha, tudo que você importa, tudo que você salva aqui no projeto esteja contido em apenas uma Então, a maneira de fazer isso é acessar este menu suspenso, digamos criar. Vou visitar meus dois projetos em D e, aqui, vou criar uma nova pasta. Vou chamá-lo de nome do projeto. Em seguida, escolha a pasta. Como você pode ver, ele já está destacado aqui. Você também pode clicar duas vezes, entrar nele e escolher. Então, agora isso mudou para o nome do projeto. Essa é uma cena na pasta do nome do projeto. Se clicarmos aqui, deixe-me fechar isso. Se eu esquecer, diz a descrição do projeto. Está descrevendo cada pasta que foi criada dentro da pasta que acabamos de criar. Criamos uma pasta de cenas, pastas de renderização. Uma pasta de ativos e todas essas outras pastas. Se eu fechar isso e disser Control S, Note now, ele entrará automaticamente na pasta de cenas. Essa é a pasta do projeto que acabamos de criar. Se eu subir, como você pode ver, temos uma pasta de cenas. Automaticamente, podemos salvar a cena lá. Podemos ter várias cenas. Se eu disser Controle N para novo, Controle N e Controle S para salvá-lo. Podemos salvar uma segunda cena dentro desta pasta do projeto. Assim, podemos salvar várias cenas se quisermos cenas ou pré-composições diferentes para uma cena geral Assim, posso chamar esse projeto de um e salvá-lo. Agora temos duas cenas nesta pasta do projeto. É isso por enquanto. Esta foi apenas uma rápida introdução e visão geral da interface do Cavalry e de como criar uma pasta de projeto Na próxima lição, vamos falar sobre o ponto de articulação, que é muito importante. Te vejo em breve. 3. Ponto de pivô: Vamos falar sobre algo chamado ponto pivô porque é muito importante para a animação, e ainda estamos dentro pasta de amostra do projeto que criamos Então, estamos apenas vendo um exemplo. Vamos criar uma nova pasta de projeto na próxima lição. Então, agora, eu quero adicionar um retângulo. Então, vou selecionar o retângulo e desenhar algo lá, desenhar outro lá Se eu selecionar a ferramenta de seleção, como você pode ver, o retângulo tem esse Gizmo aqui no centro Se eu selecionar este, ele também terá o Gizmo em seu centro local Mas se eu selecionar os dois, mantendo pressionada a tecla Shift e selecionando os dois, Control G. Agora, como você pode ver, o ponto pivô está no meio. Tudo bem. Se eu desfizer esse Controle Z, se eu selecionar esse retângulo e colocá-lo aqui e selecionar os dois, Controle G, você notará que o ponto de articulação ainda está no centro da tela Então, se tentarmos animar esse grupo, talvez girando-o, ele gire em torno do centro da prancheta, quando talvez queiramos que ele gire aqui mesmo no centro dos dois Então, isso significa que temos que ter muito cuidado sobre onde colocamos esse ponto de articulação quando estamos desenhando ou projetando nossos elementos de interface Ok, é claro, como você pode ver, quando temos um grupo selecionado ou mesmo qualquer forma, existe um atributo pivô. E você pode movê-lo, por exemplo, se eu movê-lo no X, como você pode ver, nós o estamos movendo. Se eu selecionar um grupo, também podemos mover seu pivô E observe que são as formas ou o grupo que está se movendo em relação ao ponto de articulação. O ponto de articulação permanece no centro. Então isso nos leva à conclusão que eu queria que você tivesse. Quando estivermos desenhando um elemento de interface de usuário, eu aconselho você a desenhá-lo aqui no centro, porque se você desenhar elementos diferentes na prancheta e depois agrupá-los, o ponto pivô vai para o centro e você terá que mover manualmente esse grupo para o centro, da mesma forma que fizemos Portanto, é sempre melhor desenhar esse grupo aqui, basta adicionar os elementos que você está criando e você os projetará em relação ao dispositivo aqui no centro E quando você agrupa todos eles e os move, todos eles se movem com o dispositivo já no centro Vamos ver como fazer isso quando começarmos a desenhar. Então, essa foi apenas uma visão geral rápida dos pontos de pivô, e precisamos ter isso em mente 4. Crie um botão: Vamos desenhar um botão. Antes de fazermos isso, vamos criar um projeto totalmente novo porque agora é um projeto sério. Então, vou até o menu suspenso, crio, e vamos até a pasta principal e vou criar uma nova pasta. Chame isso de botão. Entre e depois escolha. Tudo bem, então temos essa pasta de botões e ela criou todas essas pastas. Então, agora não queremos salvar isso. Vou apenas dizer Control N e depois descartar porque queremos criar uma nova cena Control N é uma nova cena, não um novo projeto. Então descarte essa cena. Podemos controlar S, e ele será salvo na pasta de cenas da pasta de botões. E o nome é button dot cv. Então, vamos lá. Temos uma pasta de botões e uma cena de currículo com pontos de botão. Agora, quero mudar para magnific.com, formalmente chamado Hoje em dia, eles chamam isso de Magnific e eu quero ir para os ativos de ações Esses são vetores. Quero pesquisar por assinar. Tudo bem, eu tinha procurado um bom botão de inscrição. A cor deve ser vermelha. Tem um que eu gosto muito, mas esse. Eu gosto desse, mas sim, vamos criar esse. Então, vou baixar a imagem JPEG ou você pode simplesmente fazer uma captura Aqui vamos nós. Agora, de volta à Cavalaria, vou clicar duas vezes aqui E vá para a pasta Downloads, e aqui está o botão que acabamos de baixar. Então aqui está. Eu só vou deixá-lo aqui. É muito grande. Então eu posso segurar a tecla Shift e clicar neste quadrado aqui e puxar para dentro para torná-lo menor. Talvez desse tamanho. Agora aumente o zoom com a roda do mouse e aqui está a imagem. Então, vou bloqueá-lo para que não seja selecionável. Porque o que queremos fazer foi adicionado ao centro da prancheta Então, se eu pressionar a tecla Alt, se eu quiser desenhar um retângulo aqui, posso selecionar a ferramenta retângulo e desenhar e fazer Mas se eu quiser desenhá-lo bem no meio da prancheta, vou segurar e clicar nele Ele adicionará um retângulo na origem mundial, 0,00 no X e Y, como você pode ver nos atributos, posição do retângulo X zero, Y zero Então, agora também temos o tipo primitivo aqui, abaixo dos atributos do retângulo e abaixo dos atributos de qualquer outra forma aqui, se eu adicionar uma elipse e desenhar a elipse A elipse é selecionada aqui. Você pode ver que temos o tipo primitivo aqui. Esta seção só permite que você altere qualquer forma que você acabou desenhar para qualquer outra forma aqui, se você mudar de ideia. Então eu posso mudar de ideia e dizer, eu não quero que isso seja uma elipse Eu queria que fosse um retângulo, que eu pudesse vir aqui e dizer retângulo E então se torna um retângulo. Eu posso vir aqui com a ferramenta de seleção, selecionar isso e dizer, eu queria que isso fosse uma elipse, e agora é uma Essa seção de tipo primitivo aqui permite que você afete a forma que acabou de perfurar como primitiva Então, deixe-me desfazer tudo isso e ficar com isso. Então, se quisermos aumentar o tamanho desse retângulo no X, vamos para a largura aqui, largura do retângulo de tamanho primitivo E o que isso nos permite fazer é que , se formos até o raio do canto, podemos aumentar o raio do canto desse jeito Agora, se eu desfizer esse Controle Z, você pode ter sido tentado originalmente a assumir que, se quiser aumentar a largura desse retângulo, é ir para a escala X Mas se aumentarmos raio do canto, ele parecerá esticado Portanto, tenha isso em mente. Então, vou refazer isso e aumentar esse raio até esse ponto, talvez 200, só para arredondar Na verdade, podemos simplesmente colocar isso de lado e ver sempre. Portanto, não precisamos dele lá porque não estamos tentando rastreá-lo. Então, vou selecionar essa opção para desbloqueá-la, arrastá-la para o lado e, em seguida, ampliar. Agora que temos isso, podemos controlar D para duplicá-lo. Agora temos outro menor como este, reduza a largura e a altura. Podemos mudar a cor apenas para diferenciá-la. Tudo bem Agora, vamos selecionar esse externo. Pode ir até o preenchimento, selecionar isso e eu darei a ele essa cor vermelha escura Em seguida, selecione este menor, vá para o campo. Vamos dar um vermelho brilhante. E vamos ao traço do menor , habilite o traço. E vamos também torná-lo vermelho, mas um pouco mais escuro. AVC. E aí? Não. Sim, eu gosto disso. Agora vou clicar em Hold on At porque tudo está no centro aqui. Em e clique em T. Agora, como você pode ver, o Gizmo está deslocado do texto. Queremos o texto. Vamos ver os atributos do texto porque ele está selecionado aqui. Vamos para o alinhamento vertical. Agora está alinhado ao centro em relação ao Gizmo. Vamos também alinhá-lo ao centro dessa forma. E agora vamos mudar isso para se inscrever. Podemos dar essa cor. Não é branco, parece creme brilhante. Eu adoro isso. Agora, se você quiser adicionar este sino, podemos acessar Eu abri svgple.com Você pode vir aqui e procurar por campainha ou notificação. Primeiro você pensou em Alright. Então, deixe-me selecionar isso. Você pode editar a cor antes de baixá-la, selecione-a. Se quisermos que seja dessa cor. Deixe-me selecionar isso. Vá até o preenchimento, selecione essa cópia, vá aqui, cole. Então, digamos que exporte um SVG. Então, agora vamos lá. Nós temos o SVG. Eu posso simplesmente arrastar e soltar isso aqui. Pronto, ou clique duas vezes aqui e vá até o Download e clique nele. Então, aqui temos a ondulação SVG. Vou colocá-lo aqui como camada de ativos. Se eu selecioná-lo, posso segurar e deslocar e reduzir o tamanho, empurrá-lo para o lado assim. Empurre isso para o lado. Acho que gosto disso. Ou é muito grande? Um turno. Você também deve selecionar isso, eu quero reduzir a altura. Então, este também, reduza a altura. Estou apenas improvisando usando meu olho para avaliar o tamanho. Acho que adoro esse tamanho. Então, agora vamos deletar isso. E agora temos um botão. Controle S para salvá-lo e nosso botão estará pronto. Então, na próxima lição, vamos ver como criar um cursor do mouse. Te vejo em breve. 5. Crie um cursor de mouse: Agora é hora de criar um cursor do mouse. Agora, eu sei o que você está pensando. Ei, Ken, por que não ir aqui para o SVG Repo e procurar o cursor do mouse Cursor do mouse. Nós temos muitos deles. Ou apenas cursor. Nós temos muitos deles. E isso é verdade, e queremos desenhar um que se pareça com isso. E a razão pela qual estamos fazendo isso é porque estou procurando uma razão para aprendermos a usar a ferramenta de caneta aqui. Então, primeiro de tudo, vamos agrupá-los em um botão. Então eu selecionei todos eles, Control G, selecione o grupo, Enter. Botão. Agora, se eu selecionar o grupo e arrastá-lo, como você pode ver, o ponto de articulação está sempre no centro Então, se eu animar a rotação, ela vai acontecer exatamente no centro, exatamente como queremos Agora, talvez queiramos que isso aconteça em um local diferente. Podemos mover o ponto de articulação. Deixe-me desfazer isso e deixá-lo no centro, mas vou escondê-lo Agora, vamos adicionar um retângulo no centro. Então, segure e clique. Lá vamos nós. Aumente o zoom. Vamos adicionar uma linha. Segure e clique. Lá vamos nós. Agora vou enquanto a linha está selecionada para pressionar o Controle D, para duplicá-la Agora temos a linha e a linha um, e eu vou girar a linha um, 90 graus. Tudo bem Agora vou selecionar essa linha novamente, Control D, e arrastá-la para baixo até talvez aquele ponto, em algum lugar próximo à parte inferior. Não precisa ser preciso, porque o que queremos é poder selecionar essa ferramenta agora, a ferramenta de caneta, e garantir que o encaixe esteja ativado, você possa se encaixar nos cantos desse jeito, depois encaixar nessa linha, depois encaixar no outro canto, depois encaixar naquele ponto ali mesmo e, finalmente, ali mesmo para que você possa se encaixar nos cantos desse jeito, depois encaixar nessa linha, depois encaixar no outro canto, depois encaixar naquele ponto ali mesmo e, finalmente, ali mesmo. Então, agora, todos esses outros podem ir. Essas outras eram apenas diretrizes. Agora temos um belo e bonito cursor do mouse. A outra coisa que queremos fazer é fazer o derrame. E para o estilo de junção, digamos redondo. Tudo bem, vamos para a cor de preenchimento e alterá-la para que possamos torná-la clara E o traço pode ser um pouco mais brilhante. E vamos para a rotação. Forma, rotação, digamos 20 graus. Se você olhar para o cursor do mouse e aquele cursor que acabamos de perfurar, a rotação é quase a mesma. 20 graus. Então, agora, vamos selecioná-lo. Vamos reduzir o tamanho. Então, escale. Se eu reduzir essa escala, isso reduzirá a escala X. Mas se eu persistir, vou reduzir tanto X quanto Y. Quero que seja pequeno Na verdade, vamos arrastá-lo para o lado assim. Em seguida, vamos exibir o botão. Aqui está o cursor do mouse. Lá vamos nós. Então, vamos torná-lo menor. Aguenta aí. Sim, é um bom tamanho agora. Eu adoro isso. Eu acho que esse é um bom lugar para acabar com isso. Na próxima lição, vamos ver como animar essa configuração. O cursor do mouse entrará e clicará no botão. Como fazemos isso? Vamos ver como fazer isso em breve. 6. Anime o cursor: Nesta lição, vamos animar o cursor do mouse e , na próxima lição, vamos animar o botão. Vamos seguir em frente e fazer isso. Selecionando o cursor, deixe-me pressionar Enter aqui e chamá-lo de cursor. Se você é iniciante, a maneira de animar um cursor talvez seja arrastando-o Deixe-me arrastá-lo para o lado desse jeito. Em seguida, vamos para a posição e animar isso e definir um quadro-chave para esses dois logo no início E então talvez até esse ponto, você o traga para lá. Então, agora, se eu jogar. Isso é uma maldição de rato. Animação. Mas o problema é que se você olhar para mim movendo o cursor do mouse pela tela, você nunca move o cursor do mouse em uma linha super reta. Parece sempre curvo se você estiver trabalhando naturalmente Então, queremos mover o cursor do mouse de forma curva. Então, como você faz isso? Usamos um caminho. Então, deixe-me remover esses quadros-chave voltar ao início. E agora o que queremos fazer é pegar a caneta e desenhar o caminho que queremos que o cursor do mouse siga Então, se eu clicar nisso e talvez lá Escape. Talvez eu possa clicar duas vezes nele e depois levá-lo até aquele local. Então V. Agora temos um caminho. Como colocamos o mouse no caminho? Usamos um localizador de caminhos para encontrar o caminho. Então, vou aqui e digo pathfinder. Entrar. E nos atributos pathfinders, você notará que aqui temos a forma de entrada Este campo está perguntando no Pathfinder, este campo está perguntando: Onde está o caminho? Mostre-me o caminho. Tudo bem, então vamos te mostrar o caminho. Então, vou arrastar nosso barbear editável aqui, que é o caminho Deixe-me entrar e renomeá-lo para path. Agora, esse caminho é o que precisamos fornecer para esse campo que está perguntando Onde está o caminho. Então, vou arrastar isso para essa forma de entrada. Como você pode ver agora, diz caminho, o nome que demos ao nosso caminho. Então, agora, o pathfinder sabe o caminho que queremos usar. Então, queremos dizer a esse cursor no atributo de posição, Ei, você sabe o que? Siga esse caminho fornecido pelo pathfinder. Então, queremos ir até o pathfinder, arrastá-lo e conectá-lo à posição Então, estamos dirigindo a posição do cursor do mouse. Em vez de dirigirmos manualmente essas posições nós mesmos, estamos dizendo que posicione você mesmo, passe o cursor do mouse de acordo com onde o caminho indica e o pathfinder indica Então, conecte-se ao Pathfinder, desse jeito. E como você pode ver, o mouse pulou para onde o descobridor disse que o caminho está Agora, no cursor, não podemos animar nada porque agora ele é conduzido pelo pathfinder, o que significa que para animar o cursor do mouse, temos que animar um atributo do pathfinder, que é a viagem não podemos animar nada porque agora ele é conduzido pelo pathfinder, o que significa que para animar o cursor do mouse, temos que animar um atributo do pathfinder, que é a viagem. Porque você pode ver, mas agora está seguindo esse caminho. Então, tudo o que precisamos fazer é ir para o primeiro quadro-chave, zero, ali mesmo Agora, vamos criar um quadro-chave. E então talvez me deixe jogar. É para lá que eu quero que o mouse sonhe. Então, vamos aumentar isso até aquele ponto, 99,5. E agora, automaticamente, outro quadro-chave foi adicionado. Então, agora vem dessa maneira. Agora podemos adicionar o caminho, o caminho em si. Está escondido, mas o mouse sabe onde está o caminho. Então, se eu jogar, mas agora percebo que está chegando de forma muito linear Não tem aquela sensação de animação, essa elasticidade. Precisamos adicionar essa elasticidade que faz com que as animações pareçam melhores Então, o que precisamos fazer é ir do editor de tempo para o editor gráfico, manter pressionada a tecla shift e reduzir a altura disso, manter pressionada a tecla control para ampliar. Selecione os dois, mantenha pressionado e clique em um deles para alterá-la para a curva de Bezier. Era uma curva linear. Agora é uma curva de Bezier. Então, com os dois selecionados, posso manter pressionada a tecla shift para restringi-los a se moverem em linha reta Mas o que queremos fazer é criar essa forma de S assim. Então, o que isso significa é que a animação começará lentamente, depois aumentará repentinamente depois diminuirá lentamente assim. Então, vamos ver isso. Se eu jogar, você pode ver isso? Então, vamos voltar para o editor de tempo. Vamos apenas jogar. Eu gosto disso. Deixe-me reduzir o tempo que o Control K demora para abrir o editor de composição se eu escapar. Também podemos ir aqui para composição, configurações de composição. Podemos reduzir isso para 20 quadros, intervalo de 20. Portanto, temos um cronograma mais curto. Então toque isso. Então eu acho que é um movimento muito natural do cursor do mouse. Na próxima lição, vamos ver como animar o botão à medida que ele é clicado, porque no momento você não sabe se o botão foi Te vejo em breve. Não vá a lugar nenhum. 7. Anime o clique do botão: Abram, pessoal. Bem vindo de volta. Então, agora é hora de animar o botão em si. Então, deixe-me jogar para ver onde eu quero que ele seja animado. Então, aqui, aqui mesmo. Portanto, precisamos aumentar a duração do projeto, talvez até 60. Isso é tudo 60. Pressione para expandi-lo e contraí-lo. Então, agora, deixe-me jogar novamente. Ali mesmo. Então, eu quero selecionar o botão em si, o grupo de botões. Lembre-se de que é um grupo com muitas coisas. Estamos animando o grupo em si. E o que eu quero fazer é animar a posição Y. Então, vou adicionar um quadro-chave lá. E o quadro-chave será adicionado aqui. Então, se eu jogar, quero copiar essa cópia e colar ali mesmo, porque no meio, ela vai se mover um pouco para baixo. Então, no eixo Y, digamos 15. Então, vai começar na posição normal e terminar na posição normal, mas no meio, desce um pouco no eixo Y. Vamos jogar isso. Deixe-me selecionar todos eles e recuá-los um pouco. Assim. Lá vamos nós. Então, agora, mais uma coisa para adicionar pouco de realismo a isso é ir ao editor gráfico e fazer o mesmo tratamento demos aos outros quadros-chave Então, mantenha pressionada a tecla Shift para reduzir a altura aqui, selecione todas elas. Espere aí. Mantenha pressionada a tecla Shift e, em seguida, clique e arraste para formar curva S. Tudo bem. Mais uma coisa. Vamos aqui. E eu quero que a gente vá para Pixa Bay. Efeitos sonoros do Pixel Bay. Porque queremos adicionar esse som de clique. Eu tinha baixado um, mas não me lembro onde ele está. Então explore. Não, vamos apenas aos efeitos sonoros. Em seguida, vou pesquisar por Click. Como você pode ver, eu havia pesquisado por Click anteriormente. É isso? Tudo bem, vou baixar esse primeiro. Mas escolha o que você mais gosta. Lá vamos nós. Então, eu vou arrastá-lo até aqui. E agora, aqui está o clique do mouse do computador de campo universal. Então, vou arrastá-lo e soltá-lo em algum lugar aqui. Onde está? Lá vamos nós. Então, agora vou arrastá-lo e colocá-lo logo abaixo de onde o clique acontece. Vamos jogar desde o início. Exatamente desse jeito. Gosto dos resultados, mas isso é só o começo. Obviamente, esse é um exemplo e um ponto de entrada para o que estamos prestes a fazer nas próximas aulas. Eu queria que nos sentíssemos à vontade com os componentes de animação. Espero que agora você tenha confiança para passar para as próximas aulas, onde começaremos criando um cartão de perfil de usuário. Te vejo em breve. E mais uma coisa, caso você queira regular o volume do seu áudio, assim como qualquer outro elemento aqui, áudio tem atributos, e um dos atributos aqui é o volume. Assim, você pode reduzi-lo até os níveis que desejar. Eu costumo ir até menos 20 para coisas que quero manter sutis. Deixe-me jogar isso. Exatamente desse jeito. Então, basta brincar com os atributos e ver o que você deseja alterar e melhorar o som do clique. Então eu acho que esse é um bom lugar para acabar com isso. Na próxima lição, vamos criar um cartão de perfil de usuário. Te vejo em breve. 8. Crie um cartão de perfil de usuário: Então, agora que terminamos com esse botão, porque o estávamos usando como exemplo, é hora de criar um novo projeto. Então, eu vou aqui, criar e ir para minhas duas pastas de projetos D. fornecerei essa pasta do projeto se você quiser examiná-la. Mas agora, eu vou criá-lo aqui. Aplicativo, animação da interface do usuário porque vamos conter aqui todos os componentes da interface que vamos animar para o resto da classe Então entre, escolha e, claro, isso está em um projeto diferente, então vou dizer Control N para uma nova cena. E agora podemos salvar essa primeira cena como cartão de perfil de usuário. Deixe-me copiar esse nome aqui. Cartão de perfil de usuário. Guarde isso. Então, a primeira coisa, é claro, trazer a inspiração se já tivermos a interface do usuário. Obviamente, se você estiver animando uma interface de usuário, você a baseará em um aplicativo, software ou site real e, portanto, precisamos fazer uma captura Então, vou clicar duas vezes nisso. Eu baixei alguns elementos da interface do usuário. De magnífico Deixe-me procurá-lo rapidamente e voltar. Tudo bem, então estamos de volta. Então, agora vou entrar na pasta do projeto. Essa é a pasta do nosso projeto e, claro, essas são as pastas que foram criadas. Uma das pastas criadas automaticamente foram os ativos. Vou entrar aqui e colar a interface do usuário que quero que usemos. Em seguida, vou clicar duas vezes. Oh, espere, já estamos aqui. Então, deixe-me abordar os dois projetos D. Ativos, aqui está a interface de usuário que eu queria que usássemos. Então, vou arrastá-lo e soltá-lo aqui, manter pressionada a tecla Shift e arrastar. Então, os elementos que queremos são essa e essa interface de usuário de mensagem, e vamos criar essa manchete de notícias também Agora que temos isso aqui, deixe-me arrastar e colocar isso aqui ao lado para que possamos observá-lo enquanto o desenhamos aqui. 9. Crie um cartão de perfil de usuário: Tudo bem Então, agora, mantenha pressionada a tecla Alt e clique no retângulo Vamos aumentar as alturas. E a largura. Então, digamos 750 por 550? Digamos que até 600. Sim, desse jeito. E lembre-se, está bem no meio. Está no centro da prancheta. E é aí que queremos. Tudo bem, agora isso está interferindo. Então, deixe-me selecioná-lo. Então espere aqui. Sim, desse jeito. Aumente o zoom. Agora, queremos selecionar isso e ir para o raio do canto. Dobre o raio do canto até esse ponto, mude a cor E como você pode ver, temos um fundo roxo. Então, clique nesta forma de plano de fundo. fundo é uma forma como todas essas outras formas, clique duas vezes e você pode arrastá-la e colocá-la na parte de trás ou apenas usar os atalhos normais do Adobe Illustrator Suporte esquerdo Control Shift para enviá-lo para trás. Outro atalho é V para a ferramenta de seleção ou A para a seleção direta , chamada Editar forma dois Então, todos os atalhos com os quais você está acostumado a trabalhar aqui. Então, está na parte de trás. Agora, enquanto ainda estiver selecionado, vamos até a cor de preenchimento e alterá-la para aquela cor arroxeada Eu gosto de roxo. Também é azulado. Ou podemos simplesmente usar a ferramenta Eyedropper para fazer uma amostra disso, em vez de perder muito tempo. Lá vamos nós. Então, ampliando o zoom, vou selecionar isso e também usar a ferramenta Eyedropper para economizar tempo e Agora, vamos criar esse texto de perfil de usuário. Então, vou selecionar a ferramenta de texto e clicar em Perfil do usuário. Perfil do usuário. Selecione a ferramenta de seleção. Mantenha pressionada a tecla Shift, clique aqui e redimensione-a. Agora podemos entrar aqui, e eu gosto de alinhá-lo com o Gizmo Talvez esse ponto. Também podemos torná-lo ousado. Eu quero que seja preto. Isso é mais grosso do que ousado. E o nosso é um pouco maior. Assim, podemos continuar redimensionando dessa forma ou apenas usar o tamanho da fonte em vez da escala, mas não importa o que queremos Em seguida, queremos criar esse menu. Então, eu vou segurar a tecla Alt e clicar na elipse também e vou clicar no duplicador para criar uma duplicação disso Vou até o duplicador selecionado automaticamente mudarei para linear e aumentarei o tamanho para espaçá-lo dessa forma Então podemos reduzir o tamanho dessa coisa. Exatamente desse jeito. E podemos mudar isso para vertical. Se clicarmos para o lado, na verdade, isso não está bloqueado. Então, deixe-me bloqueá-lo, o plano de fundo. Agora, precisamos espaçar isso. Deixe-me ampliar. Comparado com este outro, precisamos espaçá-lo. Então, enquanto ainda estiver selecionado , aumente o tamanho. Sim, eu gosto. Mas os círculos ainda são maiores. Portanto, também podemos simplesmente selecionar a própria elipse e reduzir a escala mantendo pressionada para reduzir o tamanho de cada forma individual Vamos até o duplicador. Coloque isso lá. Agora, precisamos fazer alguma organização muito rapidamente aqui. O que é isso? Esse é o cartão. Digite, fundo do cartão ou cartão BG. O texto é o perfil do usuário. Texto, a elipse. Bem, essa é a forma da elipse do menu pontilhado, só para que possamos saber É a forma original que desenhamos e que agora duplicamos com o duplicador Portanto, esse duplicador pode ser renomeado para duplicador de menu pontilhado Assim, podemos saber do que é um duplicador. E sempre podemos simplesmente transmitir isso ao duplicador, porque é isso que é duplicado pelo duplicador Portanto, pode ser filho do duplicador. O que mais? Acho que, por enquanto, isso é bom o suficiente. Também podemos agrupar todos eles em um grupo de perfil de usuário, mas faremos isso mais tarde. Então, vamos criar esse Adam Sally. Manter pressionado enquanto está selecionado, esses textos ou qualquer forma, pressionando e puxando, os duplicam Então, eu vou clicar duas vezes nele e Adam atacar. Lá vamos nós. Eu vou aumentar o tamanho. Sim. 10. Crie um cartão de perfil de usuário: Agora, para o Avata, você pode voltar ao nosso site aqui Para SVG Repo, pesquise por Avatar. Ou se você tiver uma imagem de perfil de usuário, use sua imagem. Então use Avatar. Como você pode ver, o que usei no meu exemplo é esse. Então, eu vou apenas selecionar isso. Não há necessidade de editar o vetor, então baixe-o e eu posso arrastá-lo e soltá-lo lá. Depois, posso arrastá-lo e soltá-lo lá como uma camada de ativos. E enquanto estiver selecionado, mantenha pressionada a tecla Shift A para reduzir o tamanho. Deixe-me ver, é uma boa comparação. Tudo bem Agora, vamos criar as estrelas, a avaliação de cinco estrelas. Então, vou manter pressionada a tecla Alt clicar em arrastá-la e colocá-la lá. Mantenha pressionada a tecla Alt Shift, sem mais nem menos. Pode arrastá-lo e colocá-lo ali mesmo. Tudo bem Antes de fazer isso, vamos primeiro duplicá-lo Os duplicadores funcionam melhor quando você começa na origem mundial 0,00 Então isso é o que deveríamos ter feito, duplicado assim Em seguida, mude para linear e aumente isso para cinco. E vamos aumentar o tamanho para espaçá-los, espaçá-los completamente. Então, vamos reduzir o tamanho do próprio duplicador. Estamos apenas observando isso. Não estamos tentando ser perfeitos ou exatamente assim. Estamos apenas aprendendo os conceitos. Usando o mouse ali mesmo. Podemos espaçá-los ainda mais, então aumente o tamanho. E podemos mover o ponto de articulação para essa extremidade. Se quiséssemos animar as estrelas desse lado, moveríamos o ponto de articulação para o início E então, se fizermos alguma animação, será em relação a esse ponto de pivô, mesmo qualquer tipo de Então, agora, com isso, acho que temos uma boa classificação por estrelas. Nós podemos ir e mudar a cor. Então esse é o Avatar. Esta é a forma de uma estrela. So Home, classificação de cinco estrelas. Forma. E esta é a cinco estrelas, o duplicador de classificação Então, podemos colocar isso embaixo daquilo. Não há importância em fazer isso. Estamos apenas organizando isso para que eu possa reduzir isso, porque é nisso que estamos realmente interessados agora. Mas se você quiser fazer mudanças granulares muito específicas na própria estrela, podemos fazer isso Por exemplo, podemos ir até o preenchimento e mudar a cor para aquele roxo. Eu quase acertei na primeira tentativa, então eu apenas selecionei essa cor Na verdade, vamos voltar e preencher a cor. Não, nós tivemos isso. Vamos usar o conta-gotas. Copie isso. Vamos escapar. Por que isso não está indo embora? Tudo bem Agora, vamos entrar aqui e habilitar isso. Vamos ampliar. Se usarmos o estilo de junta e dissermos redondo, vamos aumentar o tamanho da borda dessa forma. Em seguida, cole a cor roxa para torná-la mais arredondada. Agora, o que precisamos fazer é reduzir ainda mais o tamanho do duplicador, mantendo-o pressionado desse jeito Eu gosto disso. Agora, segurando, eu posso arrastar isso. Obviamente, podemos reduzir o tamanho disso e alterá-lo para cliques duplos regulares e meu e-mail em email.com Com isso selecionado, vou arrastar Alt e Alt arrastar novamente. Clique duas vezes em Digite o número de telefone mais 25407001, dois, três, quatro, cinco, seis Clique duas vezes em Mombasa Road, Nairobi . Estrada de Mombaça Agora tudo o que precisamos fazer é procurar ícones deste lugar, SBG Repo, e-mail ou correio Eu gosto disso, mas queremos mudar a cor para esse roxo. Então, vou selecionar isso. Não, selecione essa forma em si, vá aqui, selecione esse código de cor, aqui, edite, cole a cor lá e exporte o SVG Arraste o SVG e coloque-o aqui. Aqui está. Vamos simplesmente colocá-lo lá como uma camada de ativos. Selecione-o. Mantenha pressionado, todos os turnos. Lá vamos nós. Então, vamos fazer o mesmo com o telefone e a localização. Smartphone. Exportar SVG. Vamos deixá-lo aqui. Camada de ativos, selecione-a. Por algum motivo. Oh, espere. Eu o deixei cair no lugar errado. Desculpe por isso. Eu deveria ter deixado isso fora do e-mail. Mas está caindo dentro do e-mail, então vou arrastá-lo para fora desse jeito. Tudo bem, agora Qual é o tamanho desse e-mail? 0,047. Então, 0,047 e 0,047 Sim, estamos chegando perto. Localização. Vá e solte-o logo abaixo. Há uma camada de ativos. Sim, não está dentro desses ícones. No turno, 0,470 0,047 0,047 Como você pode ver, projetar qualquer interface de usuário no Cavalry é muito fácil com essas ferramentas semelhantes ao Adobe Illustrator É muito fácil se você já usa ferramentas de design gráfico. Vamos derrubá-los. Tudo bem Então, estamos quase lá. Vamos desenhar os botões, aumentar a largura. I Antes de avançarmos, vamos primeiro terminar o texto e tudo mais. Portanto, aumente o raio do canto para 30. Mantenha pressionado e clique para adicionar texto. Vamos alinhá-lo verticalmente ao centro e alinhá-lo no centro horizontalmente. Dê essa cor. Agora, vamos dar branco. Reduza o tamanho. Clique duas vezes. Siga. Acho que o tamanho da fonte ainda é grande. Sim, digamos, 24, seleção dois. Enquanto ainda estiver selecionado, mantenha pressionada a tecla Shift para selecionar as duas e colocá-las lá. Enquanto eles ainda estiverem selecionados, mantenha pressionado. Tudo bem, por que não está funcionando? É porque eles não são um grupo? Estou tentando duplicá-los. De qualquer forma, selecione o retângulo. Na travesti. Selecione o texto. Na travesti. Por que estou selecionando isso? Deixe-me trancá-la. Agora, vamos ver. Sim, desse jeito. Na travesti. Clique duas vezes nele. Mensagem. Vou selecionar isso. Vamos sentir. Colha dois colírios e selecione isso. Selecione o segundo, vá para a cor, torne-o mais claro. Podemos dar um gradiente, mas quero manter as coisas simples por enquanto Vamos selecionar o texto, ir até a cor e torná-la mais escura Não preto, mas escuro. E lá vamos nós. Acho que temos um bom cartão. Quero selecionar esses dois, mantenha pressionada a tecla Shift para selecionar os dois e , em seguida, pressione-os para baixo. E acho que temos uma boa interface de usuário. Antes de prosseguirmos, quero selecioná-los e controlar G para agrupá-los. E agora, como você pode ver, deveríamos ter terminado de criá-los no meio, mas não tem problema, podemos mover os pontos de articulação. Então, onde está o ponto de articulação no eixo Y. E agora vamos mover o ponto pivô em si porque o que estamos animando é o ponto em si porque o que estamos animando é o Selecione este e este Controle G. Vamos mover o ponto de articulação também E vamos movê-lo para baixo novamente. Agora, selecionando todos eles incluindo este plano de fundo do cartão. Controle G. Agora podemos mover esta carta como um todo e podemos animá-la como uma carta Mas se animarmos o que está dentro do grupo, na verdade, isso é um grupo Deixe-me entrar e renomeá-lo para cartão de perfil de usuário. Agora, tudo o que está dentro do cartão de perfil do usuário é tudo o que tínhamos. Então, agora tínhamos esse grupo chamado de cartão de mensagem, Enter. Botão de mensagem e este segundo grupo aqui, Enter. Botão Seguir. Agora também podemos animar os botões dentro do grupo. Por isso, é sempre bom ter esse ponto de pivô ali mesmo. Agora, o ponto de articulação desses outros realmente não importa porque vamos animar os botões e o cartão Isso já é um duplicador, então vamos animá-lo como um duplicador Então eu acho que esse é um bom lugar para terminar esta lição. Isso foi aprender a criar algo mais complexo do que um botão. Na próxima lição, você criará o cartão de mensagem porque, lembre-se, dissemos que temos várias coisas para criar. Essa é a próxima coisa que vamos projetar. Na verdade, este é um exercício para você. Siga os mesmos princípios que seguimos para projetar isso para projetar isso. Te vejo em breve. 11. Design de cartão de mensagens: Agora é hora de criar o cartão de mensagem ou o cartão de bate-papo, este cartão aqui. Agora, nós já criamos isso e ele tem o Gizmo bem no meio Então, por que não duplicá-lo? Então, vou fechá-lo, cartão de perfil de usuário, depois Controle D, e ele criará uma duplicata chamada cartão de perfil de usuário com tudo o que há uma duplicata chamada cartão de perfil de usuário nela Mas não precisamos de tudo porque, como você pode ver, a referência aqui não tem nenhum botão. Então, por que não excluir? Em primeiro lugar, deixe-me selecionar a carta um. Vou ocultar o cartão original, selecioná-lo e inserir. Em seguida, chame-o de cartão de mensagem. Expanda, destrua tudo isso. Queremos nos livrar de. Na verdade, vamos usar esses dois porque podemos usar isso como um dos balões de bate-papo e esse outro Selecionando isso, insira um balão de bate-papo e esse outro entre Bolha de chapéu dois. Podemos remover todos esses outros detalhes. Vamos ver como é. Podemos usar vamos remover todos esses ícones. Remova o Avatar, ou ele tem o avatar. Então, selecionamos o Avatar e o movemos para o topo. Mantenha pressionada a tecla Shift para se mover em linha reta. Mantenha pressionada a tecla shift para redimensioná-la. Perfil do usuário. Enquanto ela ainda estiver selecionada, mantenha pressionada e arraste. Clique duas vezes nele. Controle A, selecione tudo. Online, acho que diz online. Isso é ousado. Queremos que seja regular e reduzir o tamanho. E vamos empurrá-lo para baixo. Mantendo pressionada a tecla Control para se mover em pequenos incrementos, empurre-a para baixo. Vamos ver. Remova essa classificação de cinco estrelas. O cartão BG está bom. Na verdade, precisamos rotular isso. Entrar. Nome de usuário. E aqui deve ser lido Adam Savaging como o nome de usuário Então aqui está o texto online online. Também deve ser o texto do nome do usuário. Texto online. Eu já li online. Agora vamos ao Avatar. Em seguida, temos o menu pontilhado. Tudo bem. Bolha de bate-papo 1 Pode puxá-lo até aqui. Agora observe se vamos expandi-lo. Oh, isso é chapéu, bolha dois. Se expandirmos, se formos para a forma retangular no raio do canto, podemos mudar de tudo para individual e aqui alterá-los para 20 20 e 20. Isso cria uma espécie de formato de balão de fala. Então, selecionando-o novamente, podemos aumentar a altura, selecionar o texto e fornecer o texto que quisermos. Deixe-me ver se consigo pegar alguma mensagem aqui. Então copie isso, cole aí. Agora, ele vem como um único texto, então vou excluí-lo e, em vez disso, vou selecionar uma ferramenta de texto, clicar aqui e arrastar para criar uma caixa de texto na qual agora posso colar todo o meu texto. Onde está? Por que foi até lá? Então, vamos voltar aqui novamente. Texto. Colar. Sim, deveria estar colado aqui. Então, vou remover um texto. Só queremos alinhar à esquerda e mudar a cor do campo para branco Empurre-o manualmente com as teclas de seta e pronto, temos um balão de fala Agora, em vez de perder tempo com esse outro aqui, vamos excluí-lo e selecionar esse controle Ah, espere Esse texto que acabamos de adicionar deve estar dentro do segundo balão de bate-papo para formar esse grupo Agora, se controlarmos a bolha dois, ela formará uma nova bolha como essa ela formará uma nova bolha como Vamos expandi-lo. A forma. Aqui, isso deveria ser cinco e esse 20. Então, a cor de fundo, podemos fazer uma amostra disso, vamos fazer uma amostra disso. Então faça. Ali mesmo. Selecione o texto, altere a cor para cinza escuro, não preto, cinza escuro. É um bom balão de fala. Tudo bem, você pode alterar o texto para dizer outra coisa ou simplesmente deixar como está Deixe-me mudar isso. Agora posso selecionar o balão de fala dois novamente, deslocar D e, em seguida, puxá-lo para baixo e depois o balão de fala Controle D e puxe-o para baixo. Controle S. Agora podemos adicionar, deixe-me selecionar isso, Controle D, e puxá-lo para baixo. E vamos remover, expandir , excluir o texto. Selecione o retângulo. Queremos criar a área de digitação, essa caixa de texto. Selecionando o retângulo, vá para isso também 20. Vamos para a cor de preenchimento e torná-la mais escura. Talvez dê uma borda , mas também fique muito fraca. Não, está muito escuro. Então, primeiro de tudo, um pouco mais leve. Tudo bem, meu projeto está suspenso. Tudo bem, agora, meu projeto está suspenso. Deixe-me reiniciá-lo e voltarei em breve. 12. Design de cartão de mensagens: E, bem-vindo de volta. Agora, eu tive que reiniciar o Cavalry depois que ele congelou, então deixe-me pressionar Control O para abrir nossa cena E chamamos essa cena de cartão de perfil de usuário. Mas já vimos que já estamos criando até mesmo o cartão de mensagem aqui. Então, vamos mudar esse nome para animação da interface do usuário do aplicativo porque ela conterá todos os cartões. Não vamos criar cada card como uma cena individual, mas é possível. Então, deixe-me clicar nisso. Deixe-me expandir essa bolha cinco, e queremos duplicar esse Então, vou selecioná-lo Control D. Vou mudar a cor do traçado. Para um tom muito fraco, mas um pouco mais escuro. Ainda está claro. Então, eu quero voltar aqui. Eu gosto disso. Então, selecionando-o, vamos pressioná-lo para baixo com as teclas de seta. E vamos mudar dessa forma de balão de fala para todos os raios dos cantos sejam 30, de modo que fique redondo, desse jeito Agora, uma coisa que eu quero que façamos neste momento, se eu arrastar isso para o lado, é selecionar o retângulo do cartão, cartão BG, e queremos aplicar uma sombra projetada nele Como aplicamos uma sombra projetada? Uma sombra projetada é um efeito, e filtros são o que chamamos de efeitos na Cavalaria Se você quiser aplicar sombra projetada, desfoque, todos esses tipos de efeitos, use o filtro Então, vou clicar em PAS no cartão BG. Além disso, nos filtros , vou usar o Drop Shadow. Como você pode ver agora, temos uma sombra projetada, e a sombra projetada é adicionada ali mesmo, então vou selecioná-la. Tudo o que você adiciona na Cavalaria é como um nodo. É por isso que está aparecendo aqui individualmente. No After Effects, quando você aplica um efeito, ele nem aparece como uma camada porque não é um nó, mas aqui, é um nó. Então, com a sombra projetada, podemos brincar com a opacidade. Pode torná-lo menos visível. Nós podemos espalhá-lo. Vamos pressionar a tecla Alt e, ou não, pressionar a tecla Alt, ver para onde ela vai. Quantidade de desfoque, pode desfocá-la. Sim, eu gosto. Desfoque isso. Vamos reduzir o Alpha. Talvez no X, possamos mover o lado positivo. Lá vamos nós. Agora, a vantagem de efeitos, filtros e deformadores serem nós individuais é que você pode reutilizá-los Podemos usar essa mesma sombra projetada para o plano de fundo do cartão de perfil do usuário. Eu posso simplesmente puxar isso e colocá-lo fora de todos eles. Agora temos o cartão de mensagem e o cartão de perfil do usuário. Deixe-me selecionar o cartão de mensagem e empurrá-lo para o lado assim. Em seguida, oculte o cartão de perfil do usuário que acessamos. Ele tinha seu próprio plano de fundo, cartão BG. Então, podemos chegar aqui até essa sombra projetada e arrastá-la para o cartão BG. Filtros. Sim, exatamente assim. Ou deixe-me desfazer isso. Com a própria placa BG selecionada, podemos voltar à sombra projetada. E porque a sombra projetada, como você já viu, é um filtro. E se quiséssemos adicionar uma sombra projetada a este cartão BG, nós o selecionaríamos e iríamos para os filtros. Podemos simplesmente ir até esse filtro que já foi adicionado e arrastá-lo para campo de filtros deste cartão. Assim mesmo, e agora já está mostrando o efeito da sombra projetada. Então é isso. Acho que estamos prontos para passar para a próxima etapa, que é criar a manchete antes de começarmos a animação Então, eu vou te ver em breve. 13. Design de cartão de mensagens: Uma coisa que acabei de lembrar é em vez de ser um balão de texto , podem ser aqueles botões de carregamento que mostram que alguém está digitando Então, por que não entrar aqui no cartão de mensagem. E esse é o chat bubble five. E, de fato, ainda temos um pouco dessa área de texto aqui. Vamos colocá-lo no cartão de mensagem e fora do balão de bate-papo para que o balão de bate-papo seja exatamente Mas agora queremos remover esse texto. E queremos duplicar esse menu pontilhado e colocá-lo Então, cartão de mensagem, menu pontilhado, controle D para duplicá-lo Vou chamar isso de Enter, efeito texto pontilhado Duplicador de efeitos Enter. Então, agora podemos arrastá-lo para baixo. E porque é um duplicador, lembre-se, ele tem essa distribuição que podemos mudar de direção, podemos mudar para horizontal Agora está por trás desse balão de fala. Então, vamos colocá-lo acima desse balão de fala. Logo acima, logo abaixo da forma do retângulo. Exatamente na frente disso. Agora, esse é o balão de fala cinco. Então, se eu selecionar o retângulo, vamos reduzir a largura e a altura E vamos empurrá-lo para o lado. Mantendo pressionada a tecla Shift para mover para restringi-la em uma linha reta Vou selecionar um duplicador pontilhado. Acho que devemos fazer com que esses círculos tenham uma escala de forma um pouco maior, mantendo-os pressionados, mas também aumentando o tamanho aqui para espaçá-los. Acho que a escala da forma é muito grande. Então, talvez 1,8. Não, isso é muito grande. E isso também é muito grande. Então, 800 talvez. E isso talvez 1,5 h selecionando-o novamente. Acho que é um bom tamanho. Agora, é claro, vamos animá-lo, mas, por enquanto, eu ainda quero reduzir a intensidade dessa cor escura Agora, deixe-me expandir o efeito de digitação pontilhada selecionar a própria elipse e ir para a Queremos reduzir a opacidade da cor do campo, reduzir o Talvez até aquele lugar. Vamos animá-lo. Não se preocupe. Mas, por enquanto, acho que é um bom lugar para acabar com isso. Na próxima lição, vamos criar a manchete da notícia antes de passarmos para a animação Então, eu vou te ver em breve. 14. Título de notícias sobre design: Agora é hora de criar a manchete da notícia. Agora, já terminamos essa captura de tela, então vou excluí-la, selecionar essas duas e manter a tecla Shift pressionada para reduzir o tamanho E eu vou colocá-los lá. Não tem problema. Isso realmente não importa. Então, agora, reduza isso. Então, temos duas cartas. Temos uma sombra projetada que eles estão compartilhando e temos um plano de fundo. Queremos esconder esses dois. Controle S para salvar isso. Agora, queremos criar uma manchete de notícias aqui, seguindo os mesmos princípios de garantir que o Gizmo esteja bem no meio Então, vou escolher a ferramenta de texto e arrastar para criar uma caixa de texto E eu tenho um exemplo de título aqui, cinco principais habilidades tecnológicas em demanda no momento Vamos mudar para a ferramenta de seleção. Eu vou aumentar o tamanho. Vamos mudar para uma fonte diferente. O líder. Ousado. Você pode escolher a fonte que quiser. Vamos reduzir o espaçamento entre linhas. Acho que terminamos. Sempre podemos mudar a fonte. Deixe-me ver o que dizer do machado monstro. Mas eu quero preto. Muito grosso. Sim, algo parecido. Se eu clicar duas vezes nele, podemos arrastá-lo para aumentar a largura. Acho que gosto dessa forma agora. Então, volte para a seleção dois. Enquanto ainda estiver selecionado, vou arrastar e clicar duas vezes nele, Control A, e vou digitar um subtópico ou subtópico menor Copie isso. Tudo bem, é muito grande, então vamos reduzir esse tamanho Eu só quero uma frase. Algo parecido. Mantendo pressionada a tecla Shift, posso arrastá-la em linha reta para baixo E enquanto ainda estiver selecionado, posso arrastar novamente para duplicá-lo e clicar duas vezes nele, Controle A, data, talvez uma coluna, ferramenta de seleção E a caixa de texto é muito grande, então diminua o zoom. Na verdade, isso é o que eu quero fazer é excluir isso e apenas selecionar isso e clicar para criar um livro didático de uma única linha em vez de um livro de parágrafos Então, agora vamos mudar isso para uma data e uma coluna. A postagem do blog foi escrita, arraste e clique duas vezes nela. Em que data? 29 de maio de 2026 E para isso, vamos usar o normal. Para este, também usaremos o normal. Agora, vamos deixar isso em negrito. Vou arrastar a data. Escrito com a tecla Alt drag, mantendo pressionada a tecla Shift para se mover em linha reta. Tudo bem, eu não consegui fazer isso. Digamos, Michelle Lin ou algo assim. Eu não quero que isso seja preto, então vamos torná-lo ousado. Ousado. Selecionando tudo isso agora. Podemos agrupá-la e chamá-la de manchete de notícias Também podemos mover seu ponto de articulação se não gostarmos de onde ele está, talvez queiramos que ele Agora, mais uma coisa que podemos acrescentar são esses destaques, cinco principais habilidades técnicas. Sim, digamos que esse. E enquanto ainda estiver selecionado, vou arrastar High Demand, selecionar este lado e puxar. Então, queremos o marcador. Enquanto eles ainda estiverem selecionados, vou abordar a opacidade e reduzir a opacidade E agora, esses são os efeitos de rascunho ou marcador que vamos animar sobre o Então, vamos reduzir isso. Digamos que você esteja usando um marcador que não cobre todo o texto Mas vamos animar esse texto, animar esses Na verdade, vamos mudar isso para um marcador verde. Ou qualquer cor que você queira usar. É isso por enquanto. Eu acho que esse é um bom lugar para acabar com isso. Eu queria que criássemos a manchete de notícias e não esquecesse de adicionar essas formas ao grupo de manchetes de notícias para que, ao mover o grupo, você mova Quando você está animando o grupo, você está animando tudo. Controles. 15. Cursor do mouse: Antes de passarmos para a animação, precisaremos de um cursor do mouse. E como esse é um projeto novo, não temos o cursor do mouse que criamos anteriormente. Agora podemos importar o cursor do mouse como um ativo pré-composto ou pré-composto e começar a usá-lo, mas não temos tempo para começar a falar sobre pré-composições Então, teremos que criar um cursor do mouse novamente, mas isso depende de você. Esse é o seu exercício. Crie um cursor de mouse seguindo as etapas que seguimos anteriormente nas aulas de botões e crie um bom cursor de mouse que possamos usar em nossa animação. Te vejo na próxima aula. 16. Anime o cursor: Então, agora, como você pode ver, eu já criei meu próprio cursor do mouse e é hora de começar a animação. Então, deixe-me esconder a manchete da notícia. E como você pode ver, isso é o que temos. Eu quero torná-lo menor. Então, vou selecioná-lo e manter pressionada a tecla Shift porque queremos encaixar tudo nessa tela e depois animar tudo Então, eu quero empurrá-lo até aquele canto. E eu quero mostrar esses outros dois. Podemos colocar isso aqui. Na verdade, vamos empurrá-los para cima e para o lado. Vamos selecionar todos eles, exceto o cursor do mouse e reduzir o tamanho assim porque você quiser. Queremos que cada um deles tenha espaço suficiente para caber na tela dessa forma sem que o outro apareça. Então, queremos isso em algum lugar aqui e isso em algum lugar aqui. Vamos limpar o acordo em breve. Só queríamos ter um lugar difícil onde o mouse pudesse se mover de um lugar para outro animado. Agora, isso deve ser o oposto. E agora queremos pensar na jornada do cursor do mouse. Como ele vai viajar e por quanto tempo em cada ponto? Então esse é o nosso trabalho agora. Obviamente, o primeiro passo é criar o caminho pelo qual o mouse passará do começo ao fim e, em seguida, cronometraremos cada parte em que ele interage com um elemento Então, digamos, deixe-me escolher a caneta. Queremos que o cursor do mouse venha aqui , passe o mouse sobre a classificação por estrelas e clique nela Começará como um perfil de usuário sem classificação com apenas as estrelas com um contorno E então, quando clicados, eles terão uma cor de campo Em seguida, o mouse descerá até o botão de mensagem e clicará nele. Então vá aqui. Vamos ver esses três botões animados depois passar para esse local. Então, o caminho que queremos é algo semelhante a isso. Não precisa ser assim. Talvez até esse ponto, e então você hesite um pouco, clique na classificação de cinco estrelas vá para o botão de mensagem, mas queremos que seja um movimento curvo Então, podemos simplesmente continuar essa curva. O cursor do mouse pode se mover para esse ponto. Depois de ficar lá por um momento, podemos navegar até esse ponto. Então fuja. Então esse é o caminho que o cursor do mouse seguirá. Tudo bem, vamos renomear o cursor do mouse, a forma, o enter, o cursor do mouse e o caminho renomear o cursor do mouse, a forma, o enter, o cursor do mouse e o Na verdade, sim, vamos chamá-lo de Path e selecionar também o cursor do mouse e Control G. Agora nós os temos como um grupo, e eu quero pressionar Enter e chamá-los de cursor. Então, se expandirmos, teremos o cursor do mouse e o caminho em um único grupo. Agora, vamos também criar e adicionar um Pathfinder. Lembre-se, precisamos de um pioneiro. Aqui, e o desbravador está nos perguntando: Onde está o caminho que você quer usar Então, aqui está o caminho. Então, arrastamos esse caminho até aqui. Agora ele conhece esse caminho e o atributo de posição do cursor do mouse precisa ser acionado pelo pathfinder Então, vamos agora arrastar o pathfinder para a posição do cursor do mouse Agora, como estamos bem no começo, podemos definir um quadro-chave na viagem dos desbravadores E vamos jogar isso para ver onde queremos que o cursor do mouse chegue a esse ponto, talvez naquele ponto. Então, nesse momento, o cursor do mouse já deveria ter viajado até aquele ponto. E, como você pode ver, um quadro-chave foi criado automaticamente Agora, ao mesmo tempo, queremos editar esse caminho para que o cursor do mouse não fique muito alto. O cursor do mouse está muito acima da classificação por estrelas. Assim, podemos ir para a seleção direta e editar o caminho. Assim, podemos selecionar esse ponto, manter pressionada a tecla Shift, selecionar esse ponto ou simplesmente selecionar esse ponto e colocá-lo lá embaixo. Queremos que aponte para lá. Mas, ao mesmo tempo, eu também quero selecionar esse cursor e reduzir o tamanho. É muito grande. Isso é verificado para garantir que ambos estejam restritos a trabalhar juntos E se eu for novamente para a ferramenta de seleção direta, selecione esse ponto. Ali mesmo. Então, esses são apenas alguns pequenos ajustes que você gostaria de saber como fazer. Só estou tentando te mostrar como fazer isso. Agora, nesse ponto, não queremos o cursor do mouse ali. Eu quero recuar um pouco. Se formos ao pathfinder, como você pode ver, estamos no quadro-chave verde Isso significa que estamos no quadro-chave e podemos editar qual é o valor do quadro-chave Nós podemos voltar aqui. Queremos isso lá. Então, por um momento, queremos ficar aqui. Talvez até esse ponto, vamos. Então eu posso copiar isso e colar lá. Isso significa que esse valor é copiado para esse local e, portanto, permanecerá lá antes de fazer qualquer outra coisa. Então, agora vamos passar para este local talvez e continuar até aquele ponto. Então, isso pressupõe que você esteja clicando na classificação de cinco estrelas. Então vem assim, atrasa, depois move e clica na classificação de cinco estrelas Agora, queremos copiar esse último quadro-chave porque queremos que ele permaneça lá por um momento e cole lá Então, esses dois valores são os mesmos aqui. Portanto, ele demorará depois de clicar nele. Aguarde aí por um momento. E então, a partir daqui, podemos começar a descer. Então, vamos ver quanto tempo eu quero que dure descendo de lá até aquele ponto. Então, quando chegar a 160, deve estar em 36 pontos digamos 55 45. Sim, ali mesmo. Então, virá assim. Aguarde aí. Verifique a classificação por estrelas e, em seguida, vá até o botão de mensagem anterior. Tudo bem, agora vamos adiar por um momento porque queremos atrasar quando clicamos nele Então, chegará lá e depois atrasará. É aí que clicaremos nele e começaremos a nos mover. Então, clicaremos em talvez 200. Então, estamos apenas dizendo que esse valor, esse valor, é o mesmo que esse valor. Portanto, entre esse ponto e esse ponto, o cursor do mouse não deve mudar sua posição. Mas depois daqui, podemos começar a nos mover. Nós o movemos agora para este ponto. Então, precisamos aumentar o tempo aqui. Então, vamos às configurações de composição. Vamos fazer com que seja 1.000. 1.000. Espere para diminuir o zoom. E agora, como você pode ver, temos mais espaço. Posso selecionar todos eles, ir até o final e segurar para ampliar. Vá até lá para ver aquele destaque no final e agora puxe para o final. Ali mesmo. Então, agora dizemos que quando ele chega lá , clicamos e ele começa a se mover. Então, vamos até o Pathfinder e continuar com isso. Talvez aquele lugar. Vamos copiar esse valor e permitir que ele fique aí por um segundo. Em seguida, cole antes de passarmos finalmente para o texto da manchete da notícia Então, vamos adicionar um quadro-chave para a manchete da notícia. Ali mesmo. Guarde isso. Então, se eu segurar e diminuir o zoom com a roda do mouse, volte ao início. Diminua o zoom aqui. Clique na mensagem do mouse, vá até lá, veja os três botões. Exatamente. Digamos, até 450. Então, controle K para exibir as configurações de composição 450 ou talvez até 400. Exatamente. Fuja. Lá vamos nós. Pegue isso. Tudo bem agora, vamos jogar sem. Vamos esconder o caminho. Onde está o caminho? Vamos esconder isso. Vamos jogar isso. Exatamente. Eu adoro isso. Vamos para 360, Control K. Ainda tenho muito tempo sobrando lá 360. Sim, Escape. Tudo bem, Control S. Agora, o que resta é para nós selecionarmos. Vamos mudar para o editor gráfico. E queremos ir até o Pathfinder. Lembre-se, isso é o que estávamos animando a viagem. Queremos vir aqui, manter pressionada a tecla Shift para reduzir a altura, selecionar todas elas, segurar clicar em uma delas, e vamos ampliar isso. Mantenha pressionada a tecla Shift e vamos criar um bom conjunto de curvas S por toda Isso significa que o cursor do mouse se moverá em melhores animações. Vamos ver o que acontece aqui. Vamos embora. Sim. Exatamente. Então, ele é tocado lentamente , depois rápido e depois lentamente. Tudo bem. Temos algumas coisas para animar. Também não animamos a classificação de cinco estrelas. Quando clicado, ele deve se comportar de alguma forma. Quando o cursor do mouse passa sobre esse botão roxo, ele precisa mostrar alguns efeitos de foco. Ele precisa reagir. E então, quando chega aqui, também precisa pairar Todos esses efeitos, precisamos ter essas reações. Mas antes de fazermos isso, vamos primeiro animar a câmera Te vejo na próxima aula. 17. Câmera animada: Agora é hora de animar a câmera. Então, vamos ver como fazer isso. Em primeiro lugar, quero fechar o pathfinder aqui e fechar o cursor. O que mais temos? Deixe-me arrastar a sombra projetada até lá para que tenhamos todas as formas acima aqui e esses outros ajudantes lá embaixo Então, agora estamos animando a câmera. Então, eu quero dizer mais câmera. E agora temos uma câmera. E para que a câmera funcione, precisamos converter tudo aqui para 2,5 D. Então, vamos marcar todas essas caixas. Não, sim, incluindo o plano de fundo porque também queremos que o fundo se mova junto com tudo à medida que movemos a câmera. Agora, aqui está a câmera. Isso é o que selecionamos e podemos mudar as coisas. Então, por exemplo, não queremos ver. Eu quero forma livre, esse é o tipo que eu quero. Em aulas futuras ou em cursos futuros, mostrarei como usar esses outros tipos, mas, por enquanto, usaremos espuma grátis. Isso só nos permite nos movimentar e navegar com muita facilidade dessa forma. E você notará quando agora é a câmera se movendo. Suponha que estamos segurando a câmera e nos movendo pelo mundo. O mundo não está se movendo. Estamos nos mudando. Esta é a câmera vendo o que vê e estamos animando o que as câmeras estão vendo Então, não queremos essa cor branca. Então, o que precisamos fazer é ir para o fundo e aumentar seu tamanho. Então, escale. Vou verificar isso e aumentar o tamanho. Tudo bem. Agora, eu nos quero porque isso é 2,5 D, vamos até a câmera. Isso é 2,5 D. Podemos ampliar o eixo Z desta forma e movê-lo desse jeito. Aumente o zoom desse jeito e assim. Talvez até aquele lugar. Agora, estamos no início, então podemos definir um quadro-chave aqui Então, com a câmera selecionada e, claro, queremos ter certeza de que todas essas três, se eu segurar, definimos um quadro-chave para X, Y e Z. Então, os eixos X, Y e Z sabem que começamos aqui neste ponto É por isso que temos os quadros-chave. Agora vamos avançar um pouco. Agora, como você pode ver, o mouse chegou . Agora está aí. Isso nos dá a oportunidade de copiar, copiar e colar esses quadros-chave para que, ao movê-los para clicar na classificação de cinco estrelas, possamos ampliar Então, primeiro de tudo, neste momento, está ali. Na verdade, vamos avançar um pouco, aí mesmo. Então, eu quero arrastar esses quadros-chave para lá. Na verdade, vamos recuar um pouco. Agora, precisamos nos mover para ampliar nesse ponto. Então, no eixo Z, então vamos nos mover no eixo Z. Eixo X e eixo Y. Eixo X um pouco. Mantenha pressionado o controle para se mover em incrementos menores. E agora queremos ficar aqui por um momento. Vou selecionar essa cópia e, em seguida, avançar um pouco, até o momento em que clicarmos nela. Agora, estamos assumindo que esse é o momento em que clicamos nisso, colamos isso Durante todo o tempo, os valores aqui serão os mesmos até esse ponto, então não vamos nos mover pela câmera. Vamos jogar isso e ver. Então, daqui para cá, estamos movendo o mouse para clicar nele. Precisamos atrasar a câmera aqui até aquele ponto. Então, deixe-me clicar nessa cópia e colar lá. Isso significa que vamos ficar lá por um momento antes de começarmos a nos mudar. Então, agora vamos sair. Então, no eixo Z e no eixo Y, eixo Z novamente. Eixo Y. Acho que é um bom lugar. Diga isso, Control. Também vou copiar o eixo X e colá-lo lá, porque ele também será animado à medida que avançamos para o futuro na parte restante da linha do tempo Então, queremos que ele também saiba que deve manter a posição e o valor do eixo até que seja alterado. Então, agora, vamos nos atrasar aqui por um momento também. Até que o cursor do mouse se mova, porque em algum momento aqui, o botão será clicado Então, digamos que ele será clicado nesse momento. Então, nessa época, ele deveria ter mantido a mesma posição. Vamos colar essas mesmas posições aqui. E quando é clicado, agora vamos para o outro local da outra carta Então, na verdade, vamos arrastá-los ainda mais longe. Controle S para salvar. Vamos voltar e jogar isso desde o início. Mãe, hmm. Espere aí, clique e, em seguida, mova-se. Então, agora vamos começar a nos mudar para cá. Começamos a nos mover a partir daqui e, quando chegarmos a esse ponto, vamos ver o que temos. Quando chegamos a esse ponto, temos isso e também vamos ampliar um pouco o Z Exatamente, desse jeito. Depois de ficar aqui por um momento, o botão é clicado Em seguida, seguimos para onde o cursor do mouse está indo. Chegamos lá antes disso. Então, vamos ficar aqui por um momento, copiando até a hora de mover. Então, vamos colá-lo aqui antes de começarmos a descer para o título. Então, controle S, e então vamos jogar isso. Mensagem clicada. Vamos aqui para ver o efeito de digitação de mensagens. Então, a partir daqui, vamos sair e ver o que temos. Movendo o Z e vamos ampliar. X. Acho que é um bom lugar. Então, agora temos isso. Ficamos aqui por um momento, depois passamos para a manchete, e é aí que relaxamos Ou devemos nos mover lentamente? E se nos movermos mais rápido? Sim, mais rápido é melhor. Tudo bem, vamos movê-lo de volta para lá. Tudo bem, então agora vamos jogar desde o início. Jogue isso. Clique na mensagem inicial Adam savaging. Podemos vê-los respondendo. Então leia isso. É aí que vamos animar esse efeito de marca-texto Vamos fazer mais uma coisa importante. Como você pode ver, a animação parece muito monótona e linear. Queremos dar a ele aquela sensação de animação elástica e saltitante. Então, aquela flexibilização saltitante. Então, como de costume, vamos selecionar todas essas teclas de pressão para reduzir a altura . Selecione todos eles. Segure e clique em um deles para alterá-los para curvas de Bezier. Mantenha pressionada a tecla Shift. E vamos criar algumas curvas bonitas como essa Formas de S. Tudo bem, agora, voltando ao cronômetro e vamos jogar do início e C. Sim. e vamos jogar do início e C. Sim. Exatamente. Parece muito profissional. Eu adoro isso. Agora imagine quando adicionamos algumas músicas e alguns efeitos sonoros. Vai ser épico. Na próxima lição, vamos ver como animar agora esses outros elementos Te vejo em breve. 18. Anime o cartão de perfil do usuário: Agora é hora de animar as reações do cursor do mouse clicando ou passando o mouse Então, vamos começar com o cartão de perfil do usuário, que é esse. E a primeira coisa que vemos aqui é que o cursor do mouse vem aqui e se aproxima da classificação por estrelas. Então, vamos animar a classificação por estrelas. Está no cartão do perfil do usuário. Duplicador de classificação de cinco estrelas. Agora, o que queremos fazer é duplicar esse duplicador de classificação de cinco estrelas porque queremos um que não tenha preenchimento e outro que tenha Deixe-me te mostrar. Então, com isso selecionado, e lembre-se, colocamos as cinco estrelas, a própria estrela, a forma da estrela dentro do duplicador, apenas para que possamos movê-las como uma coisa Então, o que queremos fazer é selecionar o duplicador de classificação de cinco estrelas e o Controle D. Agora temos dois deles. Vou inserir isso e dizer, preencher e selecionar isso, inserir e dizer traçado. Esse vai ser o único com o derrame. Vou expandir isso e ir para o campo aqui e desativar esse preenchimento. Eu só tenho um derrame. Tudo o que precisamos fazer agora é avançar na linha do tempo. Antes que o cursor do mouse chegue à classificação por estrelas. Então, aqui, vamos selecionar aquela que tem uma sensação, ir até o início e selecionar essa alça. E, basicamente, o que estamos dizendo é que a partir deste momento, até este momento, basta mostrar esse traço de classificação de cinco estrelas. Mas quando chegarmos a esse ponto, apresente aquele com a sensação. Então, na verdade, não animamos nada. Acabamos de mover um deles para o futuro. Então isso produz o efeito de que, quando passamos o mouse sobre ele, ele muda de cor Quero manter pressionada a tecla Alt, ampliar aqui com a roda do mouse e selecionar isso. É aí que deve começar. Tudo bem, vamos pegar isso desse jeito. Tudo bem, então mantenha pressionada a tecla Alt e o mouse para diminuir o zoom. Então, vamos jogar isso e ver. Assim. Eu adoro isso. Agora, a próxima coisa que vamos fazer aqui é chegar a esse ponto. Quando o mouse joga até esse botão roxo, a cor deve mudar. Portanto, esse é o botão de seguir dentro do perfil do usuário. Aqui está. Então, expanda esse botão de seguir. Para a forma retangular. Sabemos que é nesse momento que queremos mudar a cor. Então, retângulo. Cor de preenchimento. Vamos segurar e clicar nele. Então, nesse ponto, estamos dizendo que a cor desse retângulo deve ser essa cor neste momento Mas agora, vamos recuar um pouco. Na verdade, nós queremos isso, eu quero isso aí mesmo. É aí que queremos que seja essa cor. Mas quando ele passa para o próximo quadro no próprio botão, ele precisa ter uma cor diferente. E antes de fazermos isso, vamos primeiro controlar depois que o cursor do mouse sair do botão. Então, ainda está no botão, ainda no botão, fora do botão. Então, nesse ponto, também deve ser essa cor, a cor normal, colar. Mas agora, no meio, deve ser de uma cor diferente. Então, de que cor. Vamos dar um roxo mais escuro. Automaticamente, alguns quadros-chave foram introduzidos. Então, neste ponto, roxo, roxo claro, escuro e depois claro novamente. Então, vamos jogar isso e ver. Então, ele produz esse efeito de foco. Eu adoro isso. Queremos fazer o mesmo com o botão de mensagem. Então, logo antes desse ponto, deixe-me fechar e expandir o botão de mensagem, o retângulo aqui Então, neste ponto, estamos dizendo que queremos que a cor desse retângulo seja essa cor E quando chegarmos a esse ponto em que o cursor do mouse está apontando o botão, vamos definir outro quadro-chave Então, segurando, vamos definir outro quadro-chave, mas vamos torná-lo um pouco mais escuro Assim. E, claro, depois disso, quando o cursor do mouse sai do botão, ele precisa voltar à cor. Então, vamos copiar isso. E vamos avançar um pouco. Vai demorar aí. Digamos que, nesse ponto, nesse ponto, cole. Então, temos esse efeito de foco, efeito de sobrecarga. E quando estiver lá, vamos também fazer essa animação de posição. Recolha esse retângulo, selecione o botão de mensagem como um todo e vamos animar a posição nesse ponto Então, voltando aqui, clicamos nele nesse ponto. Então, aí mesmo, vamos expandir isso. Copie isso, cole. Agora, no meio, empurre-o para baixo. Então, desse jeito. Então começamos a nos mover. Então, vamos embora. Jogue. Exatamente. Aqui, queremos animar os pontos, e é isso que faremos na próxima lição Te vejo em breve. 19. Anime o cartão de mensagens: Agora é hora de ver como animar Deixe-me trazer a tela Deixe-me pressionar F para preenchê-lo. Então, queremos ver como animar esses três pontos aqui. Então esse é o cartão de mensagem. Eu vou expandi-lo. E eu acho que esses três pontos foram agrupados junto com Esqueci de separá-los porque estava procurando e o encontrei aqui E, no entanto, esse retângulo em forma de seis é essa texteria. Então, vou puxar isso e colocá-lo dentro do balão cinco, porque esse é o balão cinco, que eu deveria chamar de efeito de digitação pontilhada porque não é um balão que eu deveria chamar de efeito de digitação pontilhada porque não de fala Então, agora, se expandirmos, encontraremos o duplicador que estávamos procurando Esse duplicador tem três pontos. Então, o que queremos fazer é animar esses três pontos, e o atributo específico que queremos animar é a opacidade para que, neste segundo, o primeiro ponto seja mais claro que o segundo e o terceiro seja mais e o terceiro No segundo seguinte, o próximo ponto fica mais claro ou mais fraco e avança ao longo da linha do tempo Então, queremos alternar a opacidade. Então, como fazemos isso? Uma boa maneira de alternar valores ou dados dentro do Cavalry é usando o oscilador Um oscilador é um deformador, e vamos ver como usá-lo Mas se quisermos aplicar um deformador a cada elemento em um duplicador ou em um grupo que foi duplicado dessa forma, precisamos acessá-los por meio do precisamos acessá-los por meio Então, com o duplicador selecionado, vou até os deformadores e selecionarei o deformador selecionarei Então, vou agora selecionar a sub-malha, e é isso que temos A submalha é um deformador que simplesmente seleciona cada item em um duplicador e faz o que você mandou o duplicador fazer Então, se tivermos um grupo de pontos, o que acontece é que a sub-malha escolhe o primeiro item no duplicador e faz o que você mandou Em seguida, ele volta, escolhe o segundo item no duplicador e aplica o que você pediu para Em seguida, ele vai para o terceiro item no duplicador e aplica o que você pediu para aplicar Então, com o submsh selecionado, vamos entrar na cor do campo E o que estamos dizendo aos submersos que façam com cada item? Esse é o campo Alpha. Alpha tem tudo a ver com opacidade. Queremos dizer, sobre isso, vamos adicionar um oscilador Então, aqui, eu vou dizer oscilador. E agora vou selecionar a sub-malha e arrastar o oscilador para o canal Alpha Agora, vou entrar no oscilador. E se jogarmos isso, você verá que algo está acontecendo, mas está se movendo muito rápido. Você pode vê-los? Então, o que queremos fazer é aumentar, em primeiro lugar, o valor máximo e também o valor mínimo. Não queremos que fique muito escuro. Agora, à medida que oscila, o mínimo que pode atingir é 21 em termos de opacidade Como você pode ver agora, está oscilando 21-48. Se eu puder dar isso talvez 70 ou 80, vai ficar mais escuro no lado superior Assim. Agora, a vantagem dos deformadores é que você não precisa enquadrá-los Eles simplesmente acontecem automaticamente. Como você pode ver, não adicionamos nenhum quadro-chave, mas é uma animação Mas o problema é que, se jogarmos isso, está acontecendo muito rápido. Está piscando e parece que todos os pontos parecem estar piscando ao mesmo tempo Então, o que queremos fazer é adicionar um escalonador aqui. Agora, se jogarmos isso, mas eles estão se movendo rápido. Então, vamos para a frequência e digamos 0,1. Vamos tentar isso. Jogue isso. Ok, é muito lento. 0,3. 0,4. Sim, desse jeito. Podemos até dizer 0,5. Lá vamos nós. Essa era a única coisa que deveríamos animar no cartão de mensagem A próxima coisa que faremos na próxima lição é animar esses efeitos de marca-texto Então, eu vou te ver em breve. 20. Anime o título de notícias: Agora, nesta lição, queremos ver como animar esse efeito de marcador Então essa é a manchete da notícia. Eu vou expandir isso. E essas foram as duas últimas formas que desenhamos. Então, vou pressionar Enter e renomeá-lo para Highlighter per Enter, high lighter, lower para que eu possa distinguir entre os dois Agora, o que queremos fazer é selecionar esse marcador, primeiro na parte superior, e eu quero adicionar um deformador de alinhamento E o que isso faz é, antes de adicioná-lo, se eu disser marcador superior e ir para a escala de tamanho, podemos animar esses campos Podemos animar a escala. Mas o problema é que sempre crescerá do centro, mas queremos que cresça desse lado para a direita, da mesma forma que você destacaria uma frase. Então, como você faz isso? Queremos alinhar isso Queremos usar algo chamado deformador de alinhamento para dizer que cresça deste lado ou se comporte da maneira como você se comportará deste Então, com esse marcador selecionado, vou entrar no alinhamento dos deformadores O alinhamento será adicionado aqui. Então, como sempre, posso simplesmente adicionar esse marcador ao alinhamento Ou eu posso adicionar esse alinhamento ao marcador. Agora esse alinhamento aqui, eu posso usá-lo para empurrar as coisas para a esquerda ou para a direita Agora, se eu pressionar assim e selecionar o marcador em si, aumentá-lo ou diminuí-lo no X significa que agora estamos escalando desse lado O que posso fazer agora é posicioná-lo aqui mesmo nas cinco habilidades técnicas a partir daí aumentar a escala até o fim. Então, eu quero ver de onde vou jogar. Então, eu vou jogar isso. Então, ele vai ser animado e, quando chegar a esse ponto, vai atrasar por um segundo começar a desenhar a partir daqui Então, eu quero colocar um quadro-chave aqui mesmo no marcador Então, escale, antes de tudo, defina um quadro-chave. E para a balança, quero, na verdade, usar minha tecla de seta para baixo até que ela desapareça Então, neste ponto, a escala no X é zero. Agora, se eu jogar, a essa altura, eu queria ter desenhado todo o marcador Então, vamos desenhá-lo. Então, daqui até aqui, ele vai desenhar isso. Vamos ver, jogar. Exatamente. Então, a partir daqui, precisamos fazer o mesmo com esse segundo marcador Vou selecionar o inferior, vá para alinhamento de deformadores. Onde está o alinhamento Vou colocá-lo sob o marcador que está alinhado para que eu possa simplesmente reduzi-lo e expandi-lo Mas agora vamos selecionar o alinhamento e empurrá-lo até o fim Agora selecione o marcador em si. Então, precisamos posicioná-lo aqui. E agora podemos definir apenas o quadro-chave da escala. Então, estruture a escala. Zero nesse ponto. E então, nesse ponto, um. Exatamente. Então, o que precisamos fazer é expandir isso também. Selecione a tecla Control, selecione isso, mude para o editor gráfico, mude para o Shift, role para baixo, selecione aqueles que não aparecem. Mantenha pressionada a tecla Shift. Vamos fazer isso. Mantenha pressionada a tecla Shift para reduzir a altura, aumente o zoom. E agora vamos voltar aqui e jogar e ver o que acontece. É um rap, meu amigo. Agora, a única coisa que resta são os efeitos sonoros. Queremos música de fundo sons de cliques e tudo mais. Vamos fazer isso na próxima lição. 21. Adicione efeitos sonoros: Agora é hora de adicionar um pouco de som ao nosso projeto. Então, quero voltar ao nosso site favorito de Recursos, chamado Pixel Bay. Além dos efeitos sonoros, eles também têm músicas gratuitas. Então, eu vou escolher a música. E você pode escolher o tipo de som que quiser. Então, digamos que tecnologia ambiental. Agora, escolha uma trilha sonora aqui e faça o download Agora, uma coisa que eu gosto de fazer é olhar para isso. Gosto de baixar apenas ativos que tenham esse escudo de identificação de conteúdo, e há uma boa razão para isso. Se eu abrir isso em uma nova guia, ID do conteúdo será registrado. E se eu disser baixe isso gratuitamente, poderei baixar um certificado de licença. Então eu tenho o ritmo. Então eu tenho o instrumental e a licença. Se eu abrir a licença, aqui está. Essa é a licença que você deverá fornecer no YouTube. Caso você publique seu vídeo e haja um aviso de Content ID, você deverá provar que tem permissão para usar esse som. E então é isso que você vai fornecer. Há um lugar que você vai colar. É muito simples, muito fácil, alguns minutos. Existem muitos, muitos outros instrumentos aqui sem essa licença, e eles são totalmente gratuitos para você usar O problema é que às vezes você pode usar isso e pode não ser sinalizado por nada Mas, em algum momento no futuro, você pode acordar uma manhã e perceber que há um aviso de violação do Content ID baseado nesse instrumento e que não há nenhuma licença Portanto, você precisa baixar o vídeo ou encontrar maneiras de remover a seção em que a música está tocando. Portanto, evite usar instrumentais sem ID de conteúdo. Vamos voltar aos efeitos sonoros. E eu quero pesquisar se já baixamos um clique em Sound. Também queremos baixar um ssh, alguns sons ssh. Tipo Ok, meu volume está baixo, então deixe-me tocar isso. Sim. Portanto, procure sons que serão reproduzidos à medida que as coisas avançam no vídeo. Essas são as coisas que fazem o som ser incrível. Voltarei para mostrar o que consegui baixar. Te vejo em breve. Como você pode ver, consegui baixar alguns efeitos sonoros e um instrumental de fundo Então, vou apenas arrastá-los para essa pasta. E agora eles serão importados como um grupo. Se eu expandi-lo, todos os meus sons estarão em um grupo. Então, vamos começar com o som principal. Oh, espere. Isso está em um lugar diferente. Deixe-me clicar duas vezes nisso. Deixe-me fechar isso e clicar duas vezes aqui. Então essa é a música que eu quero usar como faixa de fundo. Vou arrastá-lo até lá. E vou arrastá-lo abaixo do plano de fundo, fora do plano de fundo, mas abaixo. Quero que o boom comece aqui. Não, aqui mesmo. Sim, desse jeito. Agora precisamos de um clique do mouse aqui. Na verdade, precisamos de um clique do mouse aqui mesmo quando estamos dando um clique na classificação de cinco estrelas. Então, vamos colocá-lo ali mesmo. Em seguida, controle D para duplicá-lo. Vá em frente. Ali mesmo, também precisamos ali mesmo. Então, vamos jogar isso. Tudo bem. Vamos adicionar um swoosh Sim, desse jeito. Confira isso. Podemos ter um mais lento aqui. Era o outro filho. Reserve um tempo para torná-lo perfeito. Sim, vamos ver isso. Vamos regular o volume. Não se preocupe. Sim. Tudo bem , agora, enquanto vamos daqui para cá, precisamos de outro Vamos apenas duplicar isso e colocá-lo aqui. Então, neste momento, não estamos tentando ser perfeitos. Controle D mais uma vez para finalizar aqui. Lá vamos nós. Então, finalmente, os destaques são sonoros. Onde está? É no começo? Sim. Controle D. Tudo bem. Agora, aqui mesmo, vou ter que aumentar o volume do meu alto-falante para regular o som por um momento. Então me dê um momento. Eu quero equilibrar o som. Então essa tradução está muito alta. Negativo 16. Digamos menos dez. Portanto, também deve ser menos 20. Oh, deveria ser menos dez, menos 20, menos dez, menos 20, menos 20, provavelmente, menos 20, e esses menos 15 cada. Tudo bem, vamos começar com a palestra. Digamos que menos 20 também. Veja, não, eu ainda acho que menos 20, menos 30. Ainda está muito alto. Sim. Então, eu brinquei com o volume de cada som e acho que gosto do que temos agora. Não é perfeito, mas é muito melhor. Então, não tenha pressa e brinque com o ajuste de volume aqui mesmo. Trabalhe nos negativos, maioria das vezes, porque qualquer coisa positiva, qualquer coisa próxima a um ou mais, é muito alta. Como você pode ver, a maioria dos meus aqui tem menos 20, menos 16, menos dez , menos 20, menos dezenas. Então, Control S. Eu vou dizer isso, e agora terminamos com o som. Agora que terminamos todo o design e a animação, é hora de exportar nosso vídeo. Como fazemos isso? Vamos descobrir na próxima lição. Te vejo em breve. 22. Exportação: O projeto está quase pronto, mas precisamos exportá-lo para compartilhá-lo com as pessoas. Como fazemos isso? Portanto, a primeira coisa que precisamos fazer é garantir que nosso espaço de cores esteja definido como, pelo menos para mim, o que funciona é o espaço de trabalho colorido Rec seven oh nine Agora, se você habilitar isso e alterar isso para algum outro valor aqui, talvez não obtenha os resultados esperados. Em primeiro lugar, apenas pelo fato de termos habilitado o gerenciamento de cores, todas as nossas cores mudaram aqui. Isso era roxo. Agora é azul. Então, eu não brinquei muito com o gerenciamento de cores na Cavalaria Eu só estou brincando com o software há menos de um mês. Então, isso é algo sobre o qual estou aqui para saber mais. Então, o que eu descobri que funciona para mim é desativar isso. Defina isso Não, vá aqui e defina isso como Rec seven oh nine, desative-o Em seguida, vá para o gerenciador de renderização. Então, vamos selecionar a composição atual e veremos todas as configurações padrão. Eu não mudo muitas coisas aqui, talvez o nome da animação da interface de usuário da composição. E a pasta de renderização automática é a pasta de renderização criada automaticamente que foi criada quando criamos a animação da interface do usuário, renderizações Lembre-se disso. Tem mais alguma coisa aqui? Agora, é claro, antes da renderização, você sempre pode acessar as configurações de composição e alterar o intervalo de quadros, mas isso também mudará o local em que seus quadros-chave funcionam, pois seu caminho e tudo o que você criou são baseados nesse tamanho da linha do tempo Se você expandir a linha do tempo, isso significa que todos esses quadros-chave agora não estão exatamente onde estavam Eles estão um pouco errados. De qualquer forma, vamos exportar ou renderizar. Acho que estamos bem. Então, vou apertar Enter. Vamos para Formatar. No momento, o formato é P quatro. Isso é o que eu vou exportar. Vamos clicar em Renderizar. Na verdade, essa é a pasta de destino. Nós podemos abri-lo. Agora que está pronto, vamos abrir a pasta de destino e aí está nosso vídeo. Vamos jogar e aqui está o que temos. Deixe-me aumentar o volume. Oh, está sendo reproduzido na minha segunda tela. Deixe-me trazê-lo aqui. Tudo bem Tudo bem. Estou muito empolgado em jogar. Vamos. Vamos. Vamos começar um jogo, cara. Eu adoro isso. Então, vamos lá. Acho que esse é um bom lugar para terminar esta lição. Tenho mais algumas reflexões finais e os próximos passos que eu recomendaria tomar. Então, até a próxima e última lição. Não vá a lugar nenhum. 23. Próximos passos: E isso é o encerramento de sua primeira animação de cavalaria. Você passou de uma composição em branco para uma cena de interface de usuário totalmente animada com um cursor que se move como um mouse real, botões que reagem a cliques, efeitos de foco, uma câmera cinematográfica entre diferentes cartões e elementos da interface do usuário, um indicador de digitação e uma manchete de notícias Então, eu só quero dizer parabéns por ter chegado até aqui. Agora, tenha as habilidades para criar suas próprias animações daqui para frente Se você criar um aplicativo , software ou site codificado pelo Vibe ou desenvolvido pelo Vibe, agora você pode promovê-lo com bons vídeos animados, agora você pode promovê-lo com bons vídeos animados Mais aulas estão chegando em breve. Pretendo me aprofundar em animações baseadas em dados, gráficos em movimento para o YouTube e, eventualmente, animação completa do produto Se você quiser ser alertado quando eu deixar uma nova aula sobre Cavalaria, certifique-se de me seguir aqui mesmo no Skillshare Skillshare Se você gosta desta aula, me diga o que você achou dela. O que você gostou sobre isso? E espero que talvez o que você queira que eu aborde na próxima aula Talvez você não saiba disso, mas sua avaliação é a melhor maneira de me informar sobre desempenho como professora de cavalaria e também ajuda outros alunos saberem se essa aula pode ajudá-los Então, deixe um comentário e me diga o que você achou. Meu nome é Ken, e eu só quero agradecer por ficar comigo desde a primeira aula até a última Agora, saia e anime algo incrível. vejo na próxima aula. Paz.