After Effects - animações em UI/UX | Karim Balaa | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

After Effects - animações em UI/UX

teacher avatar Karim Balaa, UI/UX & Product Designer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      0:37

    • 2.

      Atalhos essenciais

      8:16

    • 3.

      Planejamento para a animação

      2:02

    • 4.

      Como importar o design e começar

      9:38

    • 5.

      Interação de cartões deslizantes

      8:16

    • 6.

      Transição para tela

      20:31

    • 7.

      Modelo para uma demonstração

      6:06

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.268

Estudantes

3

Projetos

Sobre este curso

Neste curso, você aprenderá como importar seus designs de interface interface e animá-los com o After Effects e criar belas para mostrar em sua próxima demonstração do produto.

Conheça seu professor

Teacher Profile Image

Karim Balaa

UI/UX & Product Designer

Professor

Sup Skillshare dudes and dudettes! My name is Karim Balaa, I'm a freelance Creative Director from Ottawa Canada. Focusing on all thing digital. I like to think of myself as a problem solver that implements the right strategy, design and interaction. I love working with startups and help create a special experience for the digital world.

I've been fortunate to work for some amazing clients on amazing projects. Here are some of the peeps I've had the pleasure to work with:





Visualizar o perfil completo

Habilidades relacionadas

Design Design de UI/UX
Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Ei, aqui é Green, Bella, faço parte da designer de Ottawa, Canadá. Esta vai ser uma aula rápida que irá cobrir um monte de truques que eu uso para criar muitas demonstrações de produtos usando Adobe após efeitos estavam indo para criar uma transição bonita e suave entre duas telas. E vou mostrar-lhe minhas técnicas e truques que podem estar disponíveis para o seu fluxo de trabalho. A capacidade de mostrar como é um movimento verde no rascunho é uma parte crucial do processo, e esta classe destina-se a ajudá-lo a levar esse jogo para o próximo nível. 2. Atalhos essenciais: antes de começarmos, eu queria ter um vídeo dedicado. Isso vai ser uma rápida visão geral do meu pós-efeitos configurar e e os atalhos de chave e plugins que eu vou usar ao longo deste curso. Primeiro de tudo, tipo meu, hum meu espaço de trabalho geral que eu pessoalmente usei parece algo parecido com isso, que na maior parte, provavelmente parece muito parecido com a maioria de vocês. Mas, hum, é assim que eu tenho isso configurado assim pode afetar alguns projetos no topo. Obviamente, todos os meus arquivos estarão aqui em 1000 composições e minhas camadas e linha do tempo aqui. E eu adoro ter o meu painel de efeitos e predefinições facilmente acessível aqui. Então, se eu quiser encontrar rapidamente um certo efeito, por exemplo, por exemplo, eles querem um borrão gaussiano. Eu posso apenas procurá-lo e, uh, clicar no clique e arrastá-lo para clara específica, apenas uma maneira rápida de adicionar efeitos específicos. Um plugue de chave que eu uso é chamado de movimento V. Você não precisa deste sangue em para acompanhar neste tutorial, mas é muito útil, especialmente para facilitar e ter controle completo de flexibilização. E de certa forma, isso é mais fácil de usar do que o editor de gráficos aqui é este movimento v dois. Ele também vem com um monte de outros efeitos que são muito legal, para ser honesto e poderia adicionar um monte de valor para seus projetos. Vou passar por isso muito em breve, mas deixe-me continuar com esses caras. Além disso, o padrão de alinhamento obviamente gosta de tê-lo realmente fácil acessível, porque é muito usado e material de tipografia rápido aqui, outro plug in que usa aux e este é um plug in para se você usar catch, que o que eu faço. E isso faz importar seus desenhos de esboços para efeitos posteriores. Ah, muito mais fácil. Em vez de exportar coisas manualmente a partir do esboço e trazê-las aqui, isso praticamente não é tudo para você, e mantém tudo posicionado no lugar certo. Mantém as coisas comestíveis. Formas permanecem formas e tipo permanece tipo e todas essas coisas. Eu também meio que quero passar por cima do meu tipo de atalhos essenciais que eu vou estar usando ao longo deste curso. Andi, achei que poderíamos passar por eles agora. Eso não estava tipo de escovando para cima deles todas as vezes. Aplique-os ao longo do curso. Então eu vou apenas criar uma nova composição e eu vou desenhar um círculo. Hum, uma coisa. Eu também gosto de um barco. Este movimento V para conectar é que ele me permite controle rápido sobre o meu ponto de ancoragem. Você vai notar que meu ponto de ancoragem agora não está centrado ou seus nós no fundo logo depois de qualquer lugar. É só em um lugar estranho. Isso me dá o controle para posicioná-lo rapidamente onde eu quero isso. Eu vou ter um centrado aqui, e eu também vou ter todo o meu círculo centrado na minha composição em Eu vou apenas fazer uma animação rápida e apenas alguns atalhos de teclas que são bastante básicos ou como, o P r S t. E você sabe o que eles são? É p rápido. É a posição depois de estar aqui, T transparência são os ativos de rotação para escala e você mostra apenas os quadros-chave ativos da maneira que eu normalmente animaria algo. Diga, eu queria fazer essa mudança daqui para aqui. Eu iria rapidamente clicar p drop em um, uh, uh, um quadro-chave Scrub através da minha linha do tempo um pouco aqui. Eu normalmente ficaria de olho nisso, o que me dirá exatamente onde estou em termos de meu tempo. E se eu quiser controle, digamos que eu queria ser exatamente um segundo e estou fora daqui, eu não deixaria isso aqui no nosso porão. Comando impressionar meu herói algumas vezes, o que me dá controle para mover exatamente 11 enquadrado. Agora que deixei cair aqui, sei que meu porta-chaves está bem aqui. Então, um, agora eu sei que eu estou exatamente um segundo Eu vou mover esta bola lá em cima. E isso levou exatamente um segundo para passar daqui para aqui. Hum se eu queria mudar a escala também. Eu pressionaria s para habilidade e soltando um quadro chave e, em seguida, com o habitual poderia entrar. Se eu clicar em você, ele me mostra apenas os quadros-chave ativos, o que é super útil para manter suas camadas aqui olhando todo limpo. Então eu também vou usar J e K, que salta entre os quadros-chave. K sobe um porta-chaves, e Jake estava apoiando-o. É uma ótima maneira de navegar rapidamente através da linha do tempo para apenas alguns momentos importantes . E, você sabe, você está exatamente no lugar certo. Então, vou levar isto. Vou fazer a balança aqui. 50 eso. Agora, estamos indo de grande para pequeno em exatamente um segundo. E é aqui que entra a flexibilização. Agora, se eu quisesse fazer isso ter uma palavra forte, como facilitar do que facilitar, eu poderia selecionar todos os meus quadros-chave e eu posso usar meu movimento V para conectar aqui. Então este controla que ele está neste controles que está no fim para fora, e este controla que ele está fora. Então digamos que eu quero ter um “Ele “dentro e fora em algum lugar por aqui. E agora, se eu pressionar o aviso de espaço, ele tem , tipo, um bom fácil para ele eu poderia ter ido mais extremo. Isto é, tipo, agora muito forte não é muito forte. Ele está fora, ou em algum lugar no meio ou novamente você poderia ter controle completo jogando com isso exatamente ao seu gosto. Outra coisa rápida que quero falar é sobre o efeito paternal aqui ou dois. Ou devo dizer, o que isso faz que dá controle sobre ... fazer duas coisas animarem exatamente da mesma maneira. Então eu vou cair em um quadrado aqui. Vou consertar seus pontos de ancoragem. E agora, é claro, se eu voltar para a minha linha do tempo em Lee, meu círculo está se movendo. Mas digamos, eu queria tomar essa posição estranha aqui mesmo. Digamos que eu queria que este quadrado fizesse exatamente o que o círculo está fazendo. Eu poderia pegar meu quadrado, pegar este chicote aqui e arrastá-lo e soltá-lo na camada. Eu queria fazer exatamente o que ele está fazendo. Então agora que eu fiz isso, você pode dizer aqui que é camada aparente é esta camada. Agora eles fazem exatamente a mesma coisa, o que é super útil. Nós vamos estar usando esta ferramenta neste curso, também faz outras coisas, como, digamos, digamos, eu queria que a rotação para dizer que eu rodei isso um pouco e agora você vai notar que ambos giraram. É uma ferramenta muito, muito útil, especialmente para você. Você é o X trabalho? Onde caminho? Tipo de querer minimizar a quantidade de quadros-chave que estavam usando. Então agora, mesmo que todo esse ar se mova dessa maneira, se os únicos quadros chave que estão sendo usados são apenas esses dois nessa camada, ele só torna mais fácil manter e gerenciar todos esses quadros chave. E isso faz após efeitos tem que trabalhar um pouco menos duro para não gerenciar, você sabe, você sabe, tipo de todos esses diferentes quadros-chave. Então, novamente, quanto menos começar a usar quadros-chave antes de você. Eu trabalho onde nossas composições podem se complicar muito rapidamente porque há muita coisa acontecendo, quanto mais podemos usar certas ferramentas que tornam isso mais fácil, melhor. 3. Planejamento para a animação: Então nós temos um projeto aqui que ele criou e é rigoroso para o propósito deste curso . E é só uma forma de nos mostrarmos. Algumas de nossas micro interações são transições, um, de nós indo desta tela de exploração onde estamos na tela de fones de ouvido sem fio e vamos clicar em um desses itens e vamos fazer a transição para este detalhado página. Vamos levar algumas coisas em consideração aqui. Por exemplo, a maneira como os fones de ouvido virão daqui até aqui, vai crescer. Esse desespero acontece, vai chegar ao centro da tela, eles vão crescer, nós vamos deslizar para fora. O resto dos itens iam deslizar pelos arcos aqui mesmo. Então é um pouco mais alto, e vai se transformar em branco, e todo o fundo vai de esta cor cinza claro para esta cor escura. Hum, vai acontecer tudo bem rápido. Talvez um segundo mais ou menos, mas vai parecer super escorregadio. Então isso é tudo no esboço,é claro. Então isso é tudo no esboço, E eu vou usar uma ferramenta chamada U X, que vai nos ajudar a importar isso do esboço para efeitos secundários. É importante que nossos itens sejam termos bastante limpos de como seus outros organizados, mas não precisa ser 100%. Você provavelmente vai ter um design A poderia ser semelhante a este. Poderia ser diferente se você quiser tipo de marcar algo semelhante a isso que também é legal. Mas sim, desde que eles estejam organizados de uma forma em que seja fácil entender como eles são organizados e estruturados, eu acho que só vai tornar mais fácil para vocês fazerem sentido e depois de efeitos uma vez Lá dentro. 4. Como importar o design e começar: Agora, a parte divertida. Vamos colocar esses projetos em efeitos após e começar inimizá-los. Como eu disse, vou usar um plugue chamado U X. Se você quiser Teoh, baixe, é grátis. É apenas em um e u ex dot io Você pode baixá-lo de graça, instalá-lo, e eu vou te dizer como isso funciona. Uma vez instalado, , você vai querer ir para seus você vai querer ir para seus plugins e ir para um U X e clicar em padrão aberto. E se parece com isso. É super pequeno. Hum, mas, uh, eso muito útil quando você clica em qualquer coisa. Mas, por enquanto, vamos clicar no quadro de arte geral aqui. Então temos nossa primeira tela. Um primeiro são pobres selecionados. Vou clicar, Enviar seleção para A e o que isso vai fazer é copiar todos os atributos aqui em suas posições certas, e vai deixá-los prontos para colá-lo em After Effects. Agora, algumas das coisas são imagens. Por exemplo, estes quatro para fones de ouvido e os touros reduz imagem aqueles que eles vão precisar para ser exportados. Mas esta ferramenta faz tudo por nós. Então eu vou clicar. Vai me perguntar para onde quero exportar essas imagens? Eu tenho uma pasta aqui chamada Assets, que está bem ao lado do meu arquivo de efeitos secundários e eu vou clicar em selecionar. Então o que isso fez agora é exportar essas imagens e tê-las prontas para importarmos . Então eu vou voltar aos efeitos secundários e você vai notar na minha ficha AUX aqui. Ele já sabe que eu já copiei esta placa de arte de fones de ouvido sem fio. E ele está me perguntando se eu quero que Teoh para exportá-lo para uma nova composição ou ocorrência agora, porque eu não tenho realização criada, eu vou clicar em novo Eu vou fazê-lo com o dobro do tamanho. Hum, e eu vou clicar neste botão aqui e agora ele está fazendo sua coisa que importou essas imagens. O nome é um pouco estranho, mas acho que está tudo bem. Não precisamos. Precisa se preocupar com isso e olhar para isso. Ele exportou tudo nos direitos, tamanho e na posição certa, e tudo está em camadas, o que é muito legal. Agora há alguns que você vai notar que são camadas aqui. Há alguns itens aqui, que são os grupos que podemos remover, e um que pode fazer isso é apenas selecionando tudo aqui e, em seguida, clique em excluir camadas de grupo . Tem que esperar para liderar todos esses grupos? Hum, sim. Então isso parece muito bom. E temos tudo aqui agradável e em camadas. Agora está um pouco confuso. Há algumas dessas coisas, mas você notará que tudo está em camadas e o texto ainda é texto. Então vai ser fácil e divertido trabalhar com isso. Então, a tela inicial aqui, nós queremos que ela venha em uma maneira rápida, mas de uma maneira agradável e interativa que deixa os usuários um pouco entusiasmados. Afinal, isso é touros lá uma empresa muito legal. Eles são bem inovadores. E eu acho que este aplicativo deve se sentir muito interativo, muito envolvente, e talvez não super estático. Então, Então, vamos pensar em como queremos fazer isso. Primeiro, vou selecionar esses caras só para vê-los aqui. Uma coisa que eu costumo fazer apenas para facilitar para mim manter o controle, eu mudaria as cores. Então, por exemplo, vou selecionar todos esses, e eu vou clicar na cor aqui. Vou dar a estes uma cor de vermelho. Quero dizer, vamos dar uma cor diferente. É algo que se destaca. Lá vamos nós. E eu vou fazer o mesmo por estes. E eu vou dar grupos como deixar todos e dar-lhes uma cor fora, digamos, azul. E depois vou fazer o mesmo por estes. E um pêssego e estes. Ok. Ugo. Então o que eu gosto sobre isso é que eu posso facilmente olhar para eles e dizer o quê? Qual seção eles são. Sabe qual parte do cartão? Hum, uma coisa. Eu mudo esse cara. Vou dar-lhe uma cor diferente, por isso não é confuso. Ok, isso é apenas uma dica visual que eu uso pessoalmente. Só me ajuda a agrupar essas coisas rapidamente. Então vamos começar aqui com uma tela vazia e esse ar vai entrar muito rápido e, hum, hum, maneira interessante. Então eu vou primeiro tomar, hum eu vou levar tudo isso. Vou mover o cursor um pouco e fazer o colchete aberto que moveu todos esses pedacinhos e a única razão pela qual fiz isso só para não vê-los imediatamente . Agora está limpo. E Aiken, eu me preocupo com esses caras e fazê-los entrar. Vamos fazer isso desaparecer muito rapidamente. Então este é o meu ícone de busca e a minha seta para trás, algo que eu e o Presti vamos clicar na capacidade, fazer o zero e fazê-lo na, uh, meio segundo marca. Vou fazer com que sejam 100. Só um desbotamento rápido para esses caras e eu vou fazer o arco está vindo de lado. Pressione o p para posição em soltar uma tecla para ele aqui e soltar outro quadro de chave aqui. Estou pressionando J e K pulando entre meus quadros e o primeiro tee daqui. Eu vou fazer com que seja lá fora, e agora ele se anima assim. Obviamente, Obviamente, é muito linear. Muito chato. Mas vamos pegar esses dois quadros chave e deixe-me dar um bom em que ele está. Ele está em cerca de 60%. Reproduza isso. Ok para esse cara, deixe-me também, hum, deixe-me fazer o mesmo por ele. Essa queda na posição aqui e depois outra posição. Tudo bem aí. E eu vou pegar os dois quadros Volsky e clicar nisso aqui, que vai aplicar exatamente a mesma flexibilização que os touros. Então eles vêm e assim, e, hum, vamos fazê-los demorar um pouco mais. Não temos nem um segundo. Vamos fazer com que seja exatamente em um segundo. Agora, se eu quiser arrastar esses dois quadros-chave para estar exatamente na marca de um segundo que você vai segurar com minha linha do tempo aqui, eu vou segurar Shift e trapar estes e agora eles são exatamente esse segundo. Então é só um pouco, uh, é Brenda Explosive replay. Parece bom, mas acho que quero que o “Ele “está fora no final seja um pouco mais forte. Que os bons por enquanto. Vamos revisitá-lo inibe. Uma vez que vemos que era a tela cheia. Então isso ainda estava de pé e então esses caras, precisamos que eles entremrapidamente, e, entrem uma maneira interessante, uma coisa que eu vou fazer aqui, então eu não estou animando cada um dos estes. Eu vou fazer cada um desses cartões ter uma camada de pais que vai ser a base sobre o resto será vai estar falando com essa camada pai. Então só tenho que me preocupar com o mau humor. Então eu vou pegar esses caras, e eu sei que o retângulo aqui é minha base. Então eu vou selecionar todos esses caras, e eu vou pegar esse chicote aqui e arrastá-lo para o retângulo. E eu vou fazer o mesmo para isso e selecionar todos esses caras retângulo arrastado. O mesmo para esta bebida. E agora o que isso faz é se eu selecionar apenas esta camada e movê-la. Tudo se move com ele, o que vai tornar muito mais fácil manter esses caras juntos. 5. Interação de cartões deslizantes: Agora vamos fazer essas quatro partes entrarem e de uma maneira interessante. O que eu vou fazer é fazer com que todos deslizem de seus lados. Então este vai deslizá-lo deste lado. Este era como este deste lado, neste, daqui, este daqui. O que eu vou fazer é selecionar isso e vou movê-lo direto para a borda do, uh, fora do aeroporto. O mesmo com isso. E visto com isto e isto, na verdade, deixe-me desfazer isto antes de fazer aquilo. Deixe-me cair no porta-chaves certo. Então deixe-me pegar esses quatro retângulos aqui e pressionar o P e soltar uma tecla para ele. Então eles terminam aqui e ele vai arrastar este quadro chave bem aqui. E então vamos fazer isso. Vamos fazer isso de novo. Vamos levar isto. Mova-o de lado. Este lado, veja, que está criando instantaneamente a animação para nós. Então, pelo menos, eles entram como aquele canal. Se eu fizer isso, eles vêm assim, o que obviamente é linear. Queremos dar a isso um pouco da flexibilização certa, então eu vou pegar esses quatro e dar a eles o mesmo fácil que fizemos. Então todos eles vêm assim um pouco mais devagar aqui só porque é renderização. Então, obviamente, parece muito robótico , tudo vindo , tudo vindo ao mesmo tempo. E, uh, uma velocidade meio chata, mas vamos nos dar um pouco mais de vida. Deixe-me voltar para este porta-chaves aqui e deixe-me pegar esse cara e pressionar. Na verdade, deixe-me ir a esta tecla daqui e pressionar, uh, selecionar todos estes três. Desculpe. Primeiro e a imprensa são para rotação nesta queda em uma rotação mantendo aqui. Então, neste momento, queremos que todos eles sejam de rotação de 0%. Zero graus é dizer eso que está bem alinhado. Mas quando for rápido, você vai rápido Jay para voltar para o quadro chave aqui, e eu vou torná-los todos realty ligeiramente, então dá a eles um pouco mais de uma sensação orgânica quando eu clicar sobre isso e eu estou recebendo um rodar esse cara um pouco assim, e então eu vou movê-lo um pouco. Então ele está fora do campus, o mesmo para este. Vou fazê-lo girar assim e mover um pouco de ajuda. E então esse cara, mesma coisa. E então vamos pegar tudo isso e também se aplica. Eu sou fácil para ele. Então agora você vai notar que eles tipo de realeza e ligeira. E então vamos dar-lhes um pouco de um salto para eles com movimento v dois. Há uma característica de excitação aqui. Isso dá-lhes um pouco de um bom salto. Então, a semana que vamos fazer isso é selecionar todos esses quadros de chave final aqui, e eu vou pressionar, manter o comando e clicar neles. E isso vai acabar com a flexibilização que teve. A razão para isso é porque quando clicamos nesta ferramenta Excite, ela faz sua própria coisa, e a flexibilização não pode interferir com isso. Vamos clicar nisso. Ele está fazendo sua coisa agora. E deixe-me também clicar em todos os quadros de chave iniciais. Deixe-me mudar a forma como eles entram. Vou clicar nesse cara, que nos dá outro conjunto de flexibilização, só assim se quisermos ter algumas configurações diferentes. Enfraquecer. Faça isso. Eu estou indo. Este é realmente alto, não é? Está fora. Então agora eles vêm e cresceram em um tipo alto de facilidade em facilidade para fora. E então eles têm um pequeno salto e ver como isso parece. Ok, isso é legal. O salto é provavelmente um pouco forte demais. Vamos ver que novamente salta um pouco forte demais. Vamos consertar isso. Podemos selecionar esses caras e depois ir para nossos pertences bem aqui, e você vai notar que há. Há algumas configurações aqui. Há ultrapassagem, equilíbrio e atrito na razão pela qual há dois deles, porque um deles é para a posição e o outro para a rotação. Eu vou fazer a superação ser apenas 10 e o saldo na batida 10 e eu vou fazer isso por tudo isso. Então, vamos tirar um minuto. Mas vale a pena, e notei que esqueci de fazer isso no dia 11 aqui. Essa é outra coisa legal sobre essa moção. V dois é que ele vem com um monte de configurações fáceis, e eles são muito altamente configuráveis para certos efeitos que são muito comuns, como este excita ele, sua ferramenta de salto e apenas uma rápida de adicionar alguns efeitos. Neste caso, eu sou como um pouco de um efeito de primavera, o que é bastante comum. Então só torna muito mais fácil trabalhar com essas coisas. Então vamos pré-visualizar isso agora. Um pouco devagar agora. Isto é renderização? Mas isto parece bom. Isso não é uma superação louca como era antes, então e não há muito de um salto para ele agora, então parece bom. Agora, a única coisa que todos eles vêm no mesmo segundo exato, o que é um pouco estranho. Então, vou fazer com que todos entrem inicialmente. Então agora eles estão todos vindo no início, mesmo com o material de cabeçalho, e então nós vamos fazer todos eles um pouco compensados. Vou clicar no 2º 1 aqui. Pressione Command que compactou a seta para a direita diz, para o crime, é 1234 Então pressione o colchete aberto 234 e o mesmo para este. Faça isso antes que o que isso fez está lá e os fez um pouco compensado. Então eles vêm em momentos ligeiramente diferentes. Isso parece muito legal. Agora, isso pode ser um pouco exagerado. Se estivéssemos fazendo isso para um aplicativo de verdade, não precisa ser assim tão funky. Mas o objetivo principal aqui é que estamos aprendendo um monte de técnicas para algumas micro interações de alta fidelidade . Então isso parece muito legal para esta tela inicial. Eso tudo isso está acontecendo em exatamente um segundo um pouco mais com porque nós compensá-los . Então, mesmo que tenha levado um pouco de tempo para começar tudo isso indo, é realmente oferecer que um segundo. Mas o diabo está nos detalhes. Eu acho que uma vez que você faz essas coisinhas aqui com o tempo, isso faz uma grande diferença. No próximo vídeo, vamos ver como vamos fazer a transição para a segunda tela. 6. Transição para tela: agora que temos introdução configurada aqui onde esses caras vêm como então vamos pensar sobre o que acontece exatamente quando vamos clicar neste conforto silencioso 35. Hum, nós vamos querer uma transição para esta tela, e nós queremos fazer isso de uma maneira lisa onde este par de fones de ouvido cresce para ser assim e nós desaparecemos, os outros, os outros itens restantes. Nós trazemos o fundo preto sobre esse tipo de coisa. Então deixe-me voltar ao After Effects. Hum, então eu tenho um major que esta imagem aqui é realmente ah, imagem de alta resolução deste par de fones de ouvido. Eso quando eu quero escalar a sua pode escalar e ficar e bife muito boa qualidade. Então, se você quiser fazer um efeito semelhante apenas para ter certeza de que você tem uma versão de alta resolução desse ativo e ele é apenas encolhido, então quando ele crescer e permanecer de boa qualidade. Assim que isso chegar, estou pensando que talvez por volta da marca de quatro segundos, nós vamos pegar esse cara. Então, Então, vamos levar isso em consideração e fazer esses caras desaparecerem nesse ponto, vou selecionar todas essas camadas. Todos esses líderes impressionaram antes da capacidade e caíram em um quadro chave bem aqui. E nós vamos fazer com que os pés fora em um cinto para, digamos, 15 Aqui, torná-los todos B zero. Exceto o par de fones de ouvido. Como você percebe MBS porque nós vamos querer que isso cresça. Então estes vão desaparecer assim, e um par de fones de ouvido vai crescer. Então deixe-me voltar aqui e que eu cair na balança para os fones de ouvido e soltar um aqui e também a posição Largue um quadro chave lá, e então vá para a direita aqui. Vamos fazer a imprensa usar arma, ver as duas chaves. Vou pegar todos esses e pressioná-lo para que não tenhamos que olhar para eles. Hum, e vamos fazer os fones de ouvido agradáveis e grandes aqui e suavizar esse Teoh por aqui , que parece muito próximo de como nós o temos configurado em nosso design. Uh, ok, isso parece legal. Deixe-me dar o mesmo. Fácil, rápido. Provavelmente dará a isso um pouco de equilíbrio também. Por enquanto, esse tipo de garotas como essa, vamos fazer com que leve um pouco mais de tempo. Legal. Hum, deixe-nos o destino que está fazendo esse cara deslizar para fora. Então deixe-me colocar uma chave de posição para esse cara, e como um par de fones de ouvido crescer, vamos fazer esse cara ficar fora. E vamos dar a ele que está usando. Então, quando você bate nisso, esse tipo de coisa acontece, o que é muito legal, ok? E então vamos também fazer a, uh, a busca, uh, desaparecer. Então deixe-me clicar na pesquisa a partir da transparência. E, uh, vamos aqui e cair em uma moldura chave e depois vamos aqui e cair em uma moldura chave. Como você percebe. Estou usando lotes J e K, que é apenas uma maneira rápida de eu pular entre os quadros-chave. Agora eu sei que neste quadro-chave sua opacidade é 100 e este quadro-chave em zero. Então isso desaparece. E assim, até agora, está parecendo algo assim. Vamos fazer com que isto pareça muito mais fixe. Vamos tomar rapidamente como você percebe quando eu estou em meus fones de ouvido. Aqui, deixe-me renomear isso para fones Percebe que posso ver meus pequenos pontos aqui. Que eu posso pegar esse nó aqui e movê-lo assim. O que isto vai fazer é isto vai animar esta semana. Então agora isso é um pouco de, ah, de uma curva para ele. E vamos também dar um pouco de equilíbrio. Então eu vou manter o comando e matar o fácil naqueles últimos quadros chave e excitar e realmente fazer aqui. Acho que já comi. Deixe-me excluir estes e clique sobre isso e clique em Excitar e deixe-me dar isso. Vamos manter a ultrapassagem em 20 anos, mas vai fazer o salto 20 também. E vamos pegar os primeiros quadros chave. Vamos fazer aqueles têm um realmente forte fácil e facilmente para agora olhar algo como este Muito legal. Então olhe, algo como este veículo. Hum, então vamos também fazer disso o fundo. Agora mude as cores. Deixe-me voltar ao meu arquivo de desenho e deixe-me, hum, deixe-me pegar algumas coisas aqui, então deixe-me pegar essa cor de fundo, então eu vou vir aqui, pegar essa cópia de cor de fundo. E o que eu vou fazer é criar um círculo que vai crescer e encher a tela enquanto isso está crescendo. Então deixe-me, hum, apenas ir, certo Você cria um círculo e vamos para este tamanho e deixe-me dar-lhe a cor que eu acabei de copiar e deixe-me fazer sua ancoragem ponto B escreve no meio e deixe-me centralizar. Está bem aqui, e eu vou fazer o suporte aberto. Traga-o aqui. E o que mais eu vou fazer aqui é que eu vou fazer o aço ser zero o palco, e eu vou fazer a escala ser realmente grande como ele preenche toda a tela. Uh, bem aqui e eu vou dar o mesmo fácil. E é claro que vou movê-lo até a parte de trás. Faça isso e aquilo está movendo mais uma camada para trás. Chama-se fundo preto. Então agora eu vou pressionar Shift para a frente Slash. E agora, quando eu clicar nisso, você vai notar que tudo aconteceu. Então acontece muito rápido. Mas vamos consertar isso. Então vamos fazer isso acontecer. Entra bem aqui. Então, como estes pés para fora, isso faz isso. Então está acontecendo um pouco rápido demais. Deixe-me abrandar. Boom. Quem? E acho que não sou um grande fã da noite por mim. Deixe-me mudar este tipo de bits mais suave sobre a facilidade na facilidade para fora. Ok. E também, o que estou pensando em fazer é fazer parecer com os fones de ouvido. Então deixe-me ir aqui e clicar na posição e manter a posição bem ali. Mas deixe-me voltar para o quadro principal inicial onde começou e fazê-lo vir em próximo Hoje tinha formado bem aqui, então ele meio que se abre com eles. E vamos manter isso a mesma facilidade. E vamos fazer isso um pouco mais forte que fácil em um pouco mais rápido. Ok? Está na hora. Parece legal. , Na verdade, acho que estou gostando do jeito que está vindo do lemming deles. Traga de volta para o meio. Vou remover a primeira posição. Mantenha isso vindo do meio. Algo como isto. Além disso, o que eu vou fazer é voltar ao nosso projeto aqui. Os rolos da cabeça são um pouco maiores. Deixe-me torná-los maiores, na verdade, deixe-me trazer esses caras em primeiro lugar. Então eu vou pegar, um, um, e eu vou enviar seleção para um E. e ele não me pediu para exportar nenhuma foto, porque estas são todas formas, formas e cores. Eso me deixou ir aqui. E eu vou importar isso como uma nova composição. Porque vou animá-los todos juntos. Então eles vão entrar por aqui. Eu não cozinho nova composição e deixo cair esses caras para que Gil, também é selecionar todos esses e ir excluir jogadores do grupo. Não precisamos ver todos aqueles Googlers. E vou mostrar-te uma técnica que usei para agrupar tudo. Então eu iria clicar em limpar novo, sem objetos e pegar todas essas outras camadas e eu vou ser pai deles para ouvir ou ter isso dos pais. E então eu vou pegar isso Agora, os motores que ganharam todos os objetos aqui. Então, se eu pegar isso e movê-lo em torno de todo o movimento com ele, o que é legal, isso faz com que seja super conveniente. Oops. Aqui vamos nós. Então vamos cair em um quadro chave de posição bem aqui e aquele outro quadro chave de posição aqui, todo o caminho para baixo. Vês? E vamos dar um pouco de aliviação. Então, este desliza para dentro. Agora, você percebe isso. Coloque isso em sua própria composição. Vamos voltar à nossa composição principal e vamos ver como vamos largar esses pequenos projetos. Então este é o meu outro feito chamado de detalhes de fones de ouvido sem fio. E eu vou fazer isso cair isso por aqui. Então, quando isso crescer, isso chegar, eu vou movê-lo um pouco, algo assim. Então agora está parecendo algo assim. Então isso é muito lento como estamos vendo. Vamos, uh, agora, você pode notar que começa em zero e então é 146 é quase dois segundos, o que é muito longo. Deixe-me fazer isso muito mais rápido. Ela deve demorar cerca de meio segundo. Então que eu mover isso para cerca de 35 e, em seguida, voltar aqui, este é provavelmente foi melhor. Legal. Hum, o que eu vou fazer aqui é eu sinto que a animação está chegando um pouco demais aqui. Então eu vou fazer não vai fazer isso vir todo o caminho de baixo. Vai vir daqui mesmo. Ele vai deslizar para dentro apenas um pouco como este, mas isso é meio estranho. Então nós vamos fazer é eu vou fazer com que todos sejam e, uh, uh, totalmente invisíveis no início, e então, uh, eles aparecem para que ele vai parecer algo como isso. Muito sutil, um pouco menos de animação, na verdade vai fazer ainda menos. Vou fazer com que se mova daqui. É um muito agora ele está se movendo um pouco menos. Isso é muito mais agradável. Ok? E vamos fazer nossos fones de ouvido um pouco maiores. Volte aqui para a nossa escala e vamos fazer isso em torno deste tamanho e aqui. Então eles vão crescer um pouco mais. E vamos fazer aquele Bo deslizar um pouco para cima. Vou pegar essa bebida e ela vai deslizar por aí. corrida aqui vai começar a deslizar. Eu não estou pressionando a posição p e deixando cair um quadro chave mover bem aqui e ele vai deslizar para aqui, e vai ficar branco. Então deixe-me entrar aqui e ir à tenda, que é a minha tenda colorida e arrastar e soltar isso logo após o logotipo do Bo e eu vou Teoh , cair em um, uh, eu vou fazer isso esperar, mas Eu vou fazer o valor zero e deixar cair um quadro chave e, em seguida, mover para cima e, em seguida, torná-lo 100%. Então agora vai parecer algo assim. Então deslize, Então fatia de um pouco rápido demais. Deixe-me abrandar isso agora. Parece legal, eu acho. Deslizando um pouco demais. Deixe-me mover isso um pouco para baixo. Então agora faz isso muito sutil, mas é muito legal. Também quer o tempo aqui para mudar de cor. Então eu vou pegar esse efeito de matizes que eu acabei de fazer uma cópia, e eu vou colá-lo neste cara aqui, pasta de dedo do pé. E se eu pressionar você agora, posso ver que, uh, não aplicou. Deixe-me ver por quê? Oh, porque nós não rebocamos Espere. Então deixe-me mudar isso para branco. Lá vamos nós. Então agora esse tempo também muda para branco e, em seguida, o mesmo para esta seta. Aqui está selecionar esta seta e basta pressionar taxa de comando. E também é ter certeza que isso é o que é então agora, quando essa garota era a mudança, eu acho que os fones de ouvido são um pouco grandes demais. Afirma que você faz um pouco menor, bife esses caras e faça a balança um pouco menor. Muito melhor. E vamos movê-lo um pouco aqui. Ok, então vamos ver como isso parece. Vamos clicar nisso, e isso cresce e as transições. Mas deixe-me consertar isso. Parece bem legal. Então essa é a transição básica indo de ir deste para estes animando e, em seguida, clicando sobre isso e ele se abre. Uma coisa que vou tentar é para o fundo em vez daquele círculo. Deixe-me ver se fica bem com ele, apenas mudando de cores e sem o círculo crescendo causa talvez isso seja um pouco exagerado. Então deixe-me vir aqui e pegar meu círculo. E em vez de ter a escala crescer, deixe-me mantê-lo grande e então deixe-me fazê-lo alimentar-se de zero 200 que também parece muito legal. Também parece muito legal. Vou fazer os fones de ouvido ser um pouco menos forte, fácil em fácil bater caranguejo, meus fones de ouvido aqui e deixe-me pegar a flexibilização inicial. E vamos fazer isso mais parecido com isso? Talvez um pouco mais. Vamos fazer isto. Vamos assistir a isso a toda velocidade. É muito legal. Vamos torná-lo um pouco mais rápido também. Selecione esses caras. Vamos entrar na temporada e sim, isso vai para a escola. Então, isso é praticamente tudo para a transição aqui. Próximo vídeo, vamos estar olhando para adicionar alguns pequenos gestos. Então apenas o toque sobre isso, bem como colocá-lo em uma simulação em um telefone e apenas prepará-lo para demonstração. 7. Modelo para uma demonstração: Vamos preparar isto para um propósito de demonstração. Vamos colocar um pequeno gesto de toque nesse cara e colocá-lo dentro e marcação do iPhone. Só para ficar bom para o prazo final, vou criar uma nova composição. E, uh, vamos eu ia fazer isso. Square vai fazer 2000 por 2000 e vamos chamá-lo de Demel. E então eu vou cair na minha, uh, quero dizer, composição. E obviamente, é bem grande, o que é bom, porque é sempre melhor tê-lo. Ganso grande que podemos fazer. Podemos torná-lo menor. Escola Eso. Então agora é Ah, está bem aqui. E antes de fazermos isso realmente vai durar. Até eu. Deixe-me colocar na marcação do iPhone. Eu só vou clicar duas vezes em algum lugar aqui. E eu tenho uma marca de telefone aqui em cima ia deixá-lo cair, e eu vou deixá-lo cair bem no fundo aqui e realmente deixe-me movê-lo para cima aqui, e eu vou derrubar a balança bem aqui. Talvez por volta de 73 para o meu talvez 73. 25. Lá vamos nós. Hum, sim. E sabes que mais? Eu também vou amarrar estes juntos então eu vou fazer a moldura do iPhone ser aparente. Então, se eu mover esses grupos juntos... Oh, isso é legal. Então temos isso acontecendo aqui. Vou fazer um gesto de sapateado bem aqui. Então vamos criar um círculo e deixar seus pontos de ancoragem centralizados. Vou ampliar isto. Você sabe o que? Vou torná-lo branco. Vou dar-lhe, uh, vou reduzir um pouco a sua transparência e vou dar-lhe uma sombra. Vamos trazer a distância um pouco e tem sido suavidade como esta. E agora temos este pequeno cursor de pés. Então, vamos fazer este cursor entrar por aqui. Vou torná-lo invisível no início e depois ser visível e eu vou fazer a posição pouco leve e um pouco para que seu olho atrapalhe . Vamos um pouco mais devagar, então isso entra assim e então vamos dar uma surra nesse cara. Então eu vou fazer a escala só para fazer a ilusão de uma torneira Vou fazer a escala B 100 então eu vou fazer a escala ser 70 e depois voltar para 100 e então eu vou pegar isso e movê-los para Ah, a polícia estava, Talvez olhe, isso parece certo, e eu também vou fazer com que desapareça. Uma vez que eu clicar nisso, eu vou clicar de volta na capacidade, soltar um quadro-chave, mover um pouco e fazer o quadro chave o zero. A única coisa que eu faria para manter meu arquivo o mais limpo possível. Eu cortaria isso aqui, então eu ... eu peguei isso, então eu não preciso ver o resto da linha do tempo. Então isso entra. Ele toca nisso e suas despesas. Acho que deixei meu telefone um pouco grande demais. Deixe-me desvincular. Estes tipos fazem o meu telemóvel. Talvez 73 fosse o número certo. 70 anos. Então, agora minhas demos assim, isso entra e eu tenho essa pressão falsa que vem e toca nisso e então ele se abre. Vou fazer isso um pouco maior. Vamos fazer com que o cursor fique quieto e ele quer um. Eu acho que a mídia mais 150 Não, você. Isso vem em torneira sobre isso na extensão. Isso parece muito legal. Faça isso um pouco menor. Vamos levar isto um pouco mais pequeno. Tudo o que era fixe. Tão simples. Espero que goste deste pequeno prato. Espero que ele tome algumas técnicas que eu uso pessoalmente. E espero que ajude com o seu e você está atrás dos efeitos. Você I interações. Se tiver alguma dúvida, sinta-se à vontade para me enviar uma mensagem. E ficarei feliz em ajudar. E se ele gostou da aula, por favor, dar-lhe um comentário sobre realmente apreciar isso e muito obrigado e ter um dia maravilhoso.