Universidade do Minho                                Instituto de Ciências Sociais                                Departam...
Universidade do Minho                     Módulo MultimédiaInstituto de Ciências Sociais             Atelier Audiovisual e...
Universidade do Minho                                        Módulo Multimédia              Instituto de Ciências Sociais ...
Universidade do Minho                      Módulo Multimédia              Instituto de Ciências Sociais              Ateli...
Universidade do Minho                     Módulo Multimédia              Instituto de Ciências Sociais             Atelier...
Universidade do Minho                     Módulo MultimédiaInstituto de Ciências Sociais             Atelier Audiovisual e...
Universidade do Minho                               Módulo Multimédia              Instituto de Ciências Sociais          ...
Universidade do Minho                     Módulo Multimédia              Instituto de Ciências Sociais             Atelier...
Universidade do Minho                     Módulo MultimédiaInstituto de Ciências Sociais             Atelier Audiovisual e...
Universidade do Minho                        Módulo Multimédia             Instituto de Ciências Sociais                At...
Universidade do Minho                                 Módulo Multimédia             Instituto de Ciências Sociais         ...
Universidade do Minho                       Módulo Multimédia             Instituto de Ciências Sociais               Atel...
Universidade do Minho                       Módulo Multimédia             Instituto de Ciências Sociais               Atel...
Universidade do Minho                       Módulo Multimédia             Instituto de Ciências Sociais               Atel...
Universidade do Minho                             Módulo Multimédia              Instituto de Ciências Sociais            ...
Universidade do Minho                      Módulo Multimédia              Instituto de Ciências Sociais              Ateli...
Universidade do Minho                                   Módulo MultimédiaInstituto de Ciências Sociais                    ...
Universidade do Minho                     Módulo Multimédia                        Instituto de Ciências Sociais          ...
Universidade do Minho                                 Módulo Multimédia                   Instituto de Ciências Sociais   ...
Universidade do Minho                      Módulo Multimédia       Instituto de Ciências Sociais              Atelier Audi...
Universidade do Minho                                  Módulo Multimédia              Instituto de Ciências Sociais       ...
Universidade do Minho                       Módulo Multimédia              Instituto de Ciências Sociais               Ate...
Universidade do Minho                                 Módulo Multimédia               Instituto de Ciências Sociais       ...
Universidade do Minho                      Módulo Multimédia               Instituto de Ciências Sociais              Atel...
Universidade do Minho                                 Módulo MultimédiaInstituto de Ciências Sociais                      ...
Universidade do Minho                                   Módulo Multimédia        Instituto de Ciências Sociais            ...
Universidade do Minho                                  Módulo Multimédia               Instituto de Ciências Sociais      ...
Universidade do Minho                                 Módulo Multimédia            Instituto de Ciências Sociais          ...
Universidade do Minho                               Módulo Multimédia              Instituto de Ciências Sociais          ...
Universidade do Minho                                Módulo Multimédia                Instituto de Ciências Sociais       ...
Universidade do Minho                                        Módulo Multimédia              Instituto de Ciências Sociais ...
Universidade do Minho                                  Módulo Multimédia          Instituto de Ciências Sociais           ...
Universidade do Minho                             Módulo Multimédia            Instituto de Ciências Sociais              ...
Universidade do Minho                            Módulo Multimédia           Instituto de Ciências Sociais                ...
Universidade do Minho                            Módulo Multimédia            Instituto de Ciências Sociais               ...
Universidade do Minho                        Módulo Multimédia             Instituto de Ciências Sociais                At...
Universidade do Minho                                        Módulo Multimédia             Instituto de Ciências Sociais  ...
Universidade do Minho                                   Módulo MultimédiaInstituto de Ciências Sociais                    ...
Universidade do Minho                                    Módulo Multimédia            Instituto de Ciências Sociais       ...
Próximos SlideShares
Carregando em…5
×

A animação Tipográfica nos Motion Graphics / Typography animation in Motion Graphics

8.359 visualizações

Publicada em

3 comentários
21 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
8.359
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
1
Comentários
3
Gostaram
21
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

A animação Tipográfica nos Motion Graphics / Typography animation in Motion Graphics

  1. 1. Universidade do Minho Instituto de Ciências Sociais Departamento de Ciências da ComunicaçãoProfessor Leonardo Pereira Ano Curricular - 2010 | 2011 ATELIER AUDIOVISUAL E MULTIMÉDIA I - Multimédia Curso de Ciências da Comunicação - 2º Ano | 2º Semestre Aula 06 1. A ANIMAÇÃO TIPOGRÁFICA NOS MOTION GRAPHICS 2. PRINCÍPIOS BÁSICOS DE ANIMAÇÃO E EXPRESSÃO 3. NOVOS RECURSOS TÉCNICOS DE AFTER EFFECTS 4. EXERCÍCIO DE ANIMAÇÃO TIPOGRÁFICA Bibliografia aconselhada: • Ollie Johnston, Frank Thomas, The Illusion of Life: Disney Animation, Disney Editions, 1986 • Jon Krasner. Motion Graphic Design. Applied History and aesthetics, 2009 • Elif Ayiter, The History of Visual Communication, 2007, http://www.citrinitas.com/history_of_viscom/index.html
  2. 2. Universidade do Minho Módulo MultimédiaInstituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo PereiraDepartamento de Ciências da Comunicação01A Animação Tipográfica nos Motion Graphics leonardpeartree@gmail.com
  3. 3. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Sobre a A Tipografia foi, desde a génese inicial dos Motion Graphics (com os primeiros genéricos cinematográficos de Saul Bass), um dos elementos pictóricos integrantes da prática dos Tipografia Motion Graphics.nos Motion Graphics • Visualizar o genérico de “Vertigo“ em: http://www.youtube.com/watch?v=pz46qS38OgM&feature=related leonardpeartree@gmail.com
  4. 4. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoFunções da Tipografianos Motion Graphics No contexto dos Motion Graphics, a tipografia pode assumir várias funções, ou seja, funções expressivas, funções comunicacionais e funções decorativas, como se pode ver nesta imagem. Com a introdução do movimento no tempo e no espaço estas funções da tipografia, que já existiam na tipografia empregue no contexto do Design gráfico estático, ganham um potencial estético, comunicacional e expressivo acrescido. leonardpeartree@gmail.com
  5. 5. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Tipos de E como é que a Tipografia pode ganhar esse potencial comunicacional acrescido? Tipografianos Motion Antes de mais convém esclarecer que há dois tipos de abordagem possível ao uso da tipografia em Motion Graphics: Graphics • O USO DE TIPOGRAFIA NÃO ICÓNICA; • O USO DE TIPOGRAFIA ICÓNICA. Mas o que são exactamente estas abordagens ao uso de tipografia? Vamos ver! >> leonardpeartree@gmail.com
  6. 6. Universidade do Minho Módulo MultimédiaInstituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo PereiraDepartamento de Ciências da Comunicação01.1Tipográfica não icónica leonardpeartree@gmail.com
  7. 7. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Tipografia A tipografia não icónica é tipografia ou texto que, tanto na sua configuração visual como na animação que possa ter ao surgir ou aparecer numa sequência de MotionNão Icónica Graphics, não tem outra função que não seja a de ser lida como um texto. A sua função é meramente informativa e geralmente não comunica com expressividade. • Visualizar separador de continuidade da RTP em: http://www.youtube.com/watch?v=pTRaotMjk8k leonardpeartree@gmail.com
  8. 8. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação TipografiaNão Icónica QUANDO ESCREVEMOS UM TEXTO NO WORD, OU QUANDO ESCREVEMOS UM MAIL NO GMAIL ESTAMOS A UTILIZAR TIPOGRAFIA NÃO ICÓNICA! Vejamos então o que é a tipografia icónica! leonardpeartree@gmail.com
  9. 9. Universidade do Minho Módulo MultimédiaInstituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo PereiraDepartamento de Ciências da Comunicação01.2Tipográfica icónica leonardpeartree@gmail.com
  10. 10. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTipografia A tipografia icónica é tipografia que, quer pela manipulação da sua configuração visual, quer pela animação que lhe é dada, ilustra e comunica o conceito ou significado Icónica da palavra ou frase que também lemos na palavra escrita. MAS O QUE QUER ISTO DIZER? Vamos ver exemplos simples do que acabou de ser dito: • TIPOGRAFIA QUE ADQUIRE ICONICIDADE PELA MANIPULAÇÃO DAS SUAS FORMAS; • TIPOGRAFIA QUE ADQUIRE ICONICIDADE PELA FORMA COMO ESTÁ ANIMADA. leonardpeartree@gmail.com
  11. 11. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTipografia 1. Tipografia que adquire iconicidade pela manipulação da sua configuração visual e formal. Icónica • Temos o caso de palavras que são manipuladas nas suas caracaterísticas características formais e visuais para ilustrar o objecto, acção ou conceito que as mesmas palavras também significam; leonardpeartree@gmail.com
  12. 12. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTipografia 1. Tipografia que adquire iconicidade pela manipulação da sua configuração visual e formal. Icónica • Um conjunto de palavras que são compostas em conjunto para ilustrar o objecto, acção ou conceito a que as palavras se referem; leonardpeartree@gmail.com
  13. 13. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTipografia 1. Tipografia que adquire iconicidade pela manipulação da sua configuração visual e formal. Icónica • Grupos de letras que formam uma imagem; leonardpeartree@gmail.com
  14. 14. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTipografia 2. Tipografia que adquire iconicidade pela forma como está animada ou pelos movimentos que as suas animações descrevem. Icónica • A animação dada à tipografia pode ilustrar a acção, comportamento ou o objecto a que a palavra se refere. leonardpeartree@gmail.com
  15. 15. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Tipografia Mas vamos então ver alguns exemplos de Tipografia Icónica e Tipografia Não Icónica aplicadas aos Motion Graphics:nos Motion Graphics • Tipografia Não Icónica em Motion Graphics http://www.youtube.com/watch?v=gGQRtf3_gTI http://www.youtube.com/watch?v=lK0A4ybqcAQ&feature=related http://www.youtube.com/watch?v=R0rduVdktMA&feature=related http://www.youtube.com/watch?v=KaxwewQKlsE&feature=related http://www.youtube.com/watch?v=VAwsvubnFUI&feature=related • Tipografia Icónica em Motion Graphics http://www.youtube.com/watch?v=Gj13ugh5FYw http://www.youtube.com/watch?v=j0CavqA2boQ http://www.youtube.com/watch?v=rIDdx7NPJgo&feature=related http://www.youtube.com/watch?v=6mnvvVi4HaI&feature=related http://www.youtube.com/watch?v=xAuQmJzt_q0 http://www.youtube.com/watch?v=_2PONjkYMPc&playnext=1&list=PL9FAF8D7D12D5997F http://www.youtube.com/watch?v=mZzs5Lz6uY8&feature=player_embedded# http://www.youtube.com/watch?v=IEVvEsEbl5I http://www.youtube.com/watch?v=UbwXnFbCTDA&feature=related leonardpeartree@gmail.com
  16. 16. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Tipografianos Motion Graphics No entanto, para além da possível iconicidade da Tipografia, a animação tipográfica pode beneficiar de alguns princípios da animação tradicional, que podem e devem ser transpostos para o contextos dos Motion Graphics, e com os quais o nosso trabalho pode ganhar em expressividade e significação com o movimento. Ou seja, EXPRESSIVIDADE CINÉTICA E LITERACIA DE MOVIMENTO. >> Vamos ver que princípios são estes! leonardpeartree@gmail.com
  17. 17. Universidade do Minho Módulo MultimédiaInstituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo PereiraDepartamento de Ciências da Comunicação02Alguns princípios básicos de Animação e Expressãoa partir de “Motion Graphic Design. Applied History and aesthetics” de Jon Krasner. (pp.144-159)1. Squash and stretch2. Anticipation3. Follow Through and Overlapping Action4. Arcs5. Timing6. Exaggeration7. Acceleration & decelaration _ Ease in e Ease out leonardpeartree@gmail.com
  18. 18. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Squash and Stretch(Comprimir e esticar) Esta técnica dá a ilusão de peso e volume ao personagem ou elemento gráfico em movimento. É usada em todas as formas de animação de personagens e pode ser aplicada, por exemplo, numa letra que saltita. Além da ilusão de peso e volume, a técnica confere acima de tudo uma sensação de vida, de elemento vivo, ao personagem ou elemento gráfico, dada a sua não rigidez. leonardpeartree@gmail.com
  19. 19. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoAnticipation (antecipação) Movimentos que preparam a audiência para uma acção que o personagem se prepara para realizar, tal como começar a correr, saltar ou mudar de expressão. Exemplo: uma bailarina não salta, sem antes preparar o impulso. Uma acção para trás acontece sempre que uma acção para a frente vai ser executada. • Vamos ver um vídeo explicativo deste princípio de animação (“anticipation”). leonardpeartree@gmail.com
  20. 20. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoArcs Todas as acções, com poucas excepções (tal como objectos mecânicos, não-orgânicos), seguem um arco ou um caminho circular. Especialmente no caso da figura humana e das acções de animais. Os arcos conferem à animação uma acção mais natural e uma melhor fluidez de movimento. Exemplo: Quando atiramos uma pedra esta não descreve um percurso em linha recta. Ela descreve um arco por força da gravidade conjugada com a força que lhe imprimimos ao a atirar. leonardpeartree@gmail.com
  21. 21. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação FollowThrough andOverlapping Action Este princípio está relacionado com o terminar de movimentos. Todos os movimentos descritos por elementos gráficos ou personagens geram reações depois de terminarem. Por exemplo, um personagem que esteja a correr em alta velocidade e é parado de forma brusca tem a massa do seu corpo deslocada levemente para frente pela inércia, assim como os seus cabelos e roupas. O mesmo acontece com a cauda deste esquilo, por exemplo. Ou seja, as coisas não param no imediato e a acção continua para além do momento da paragem. • Vamos ver um vídeo explicativo deste princípio (“follow“) leonardpeartree@gmail.com
  22. 22. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTiminig and Aqui temos um princípio que lida com a relação de tempo em que as acções acontecem na animação. A mesma acção realizada em velocidades diferentes pode passar a ideia Motion de sofrimento ou mesmo humor. Tudo depende da intenção narrativa do animador! Por exemplo: Se pegarmos num filme de uma jovem a dançar ballet e o colocarmos em slow motion acompanhado de música clássica e lenta, a cena terá um efeito de seriedade e profundi- dade dramática muito acentuadas. Se pegarmos no mesmo filme e o acelerarmos, a nossa leitura e interpretação da cena será significativamente diferente da primeira. Muito provavelmente a nossa leitura da história será humorística. leonardpeartree@gmail.com
  23. 23. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoExaggeration O exagero não é a distorção completa do desenho, ou acções violentas a todo o momento. É antes algo que se assemelha mais com o efeito caricatural das caras, expressões, poses, atitudes e acções. O objectivo é pegar numa acção realista copiada do real e conferir-lhe alguma acentuação exagerando os arcos do movimento, ou o squash and strech das expressões. • Vamos ver um vídeo explicativo deste princípio (“Exaggetation“) leonardpeartree@gmail.com
  24. 24. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Ease in e Este Princípio de animação está relacionado com o iniciar e terminar do movimento de um objecto, personagem ou elemento gráfico. Ease OutAcceleration Na natureza e mundo real, quando um objecto começa um movimento ou deslocação nodecelaration espaço, este não se desloca imediatamente a uma determinada velocidade. Acelera pro- gressivamente até que atinja uma determinada velocidade. O mesmo se aplica ao parar do movimento ou deslocação de um mesmo objecto. Há uma desaceleração progressiva até à paragem total do objecto. O mesmo deverá ocorrer na animação de elementos gráficos. O não uso deste princípio origina movimentos mecânicos e pouco naturais. leonardpeartree@gmail.com
  25. 25. Universidade do Minho Módulo MultimédiaInstituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo PereiraDepartamento de Ciências da Comunicação03Novos recursos técnicos em After Effects (Composição)Texto1. Criar texto ou uma layer de texto;2. Aplicar Presets de Texto;Coordenação de movimento entre objectos3. Implementar Parenting entre objectos;4. Criar objectos Nulos;5. Nesting ou Pre-composing;6. Criar e aplicar uma Motion Path;7. Aplicar o Auto-Orient;Propriedades de movimento de objectos8. Aplicar o Ease in e ease out (aceleração e desaceleração de movimento);Máscaras9. Criar, editar e animar Máscaras.Cameras Virtuais10. Criar, editar e animar cameras. leonardpeartree@gmail.com
  26. 26. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTexto Como se cria texto no After Effects (AE)? No AE o texto é um tipo de layer de entre as várias disponíveis. Para criar texto, ou se cria uma layer de texto (1), ou se usa a ferramenta de texto (2) disponível no menu das ferramentas. (1) Basta clicar na ferramenta de texto e na viewport da composição escrever o texto que se quer. O AE gera automaticamente um layer no painel das layers ao lado da timeline. (2) Outra possibilidade é seguir o seguinte caminho: >> No menu principal escolher “Layer” >> Depois “New” >> Por último “Text“ Depois, com o cursor clicar dentro da viewport da composição, escrever o texto pretendido. A layer de texto pode ser modificada e animada tal como outra layer qualquer. Para isso basta abrir a layer (clicar em triangulo antes do nome da layer (1)) e atribuir Keyframes em cada parâmetro disponível. Pode-se ainda transformar a layer numa layer tridimensional accionando a checkbox por baixo do ícone do cubo (2). Quando se transforma uma layer numa layer tridimensional dentro do “Transform“ da layer surgem 1 2 os parâmetros de manipulação tridimensional da layer: leonardpeartree@gmail.com
  27. 27. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Aplicar Como se aplicam Presets de animação de texto no AE? O AE disponibiliza uma série de templates de animação já construídos que se designam de Presets. Presets de Para os aplicar a um texto siga-se o seguinte caminho:animação de Texto >> No menu principal ir a “Animation”; >> Depois seleccionar “Browse Presets“. Abre-se a aplicação “Bridge“ e uma nova janela: >> Nesta nova Janela escolher a pasta “Text“; >> Escolher o tipo de Preset; >> Escolher o Preset e fazer duplo clique sobre o Preset escolhido. Seleccionar o Preset Depois é só correr o cursor da Timeline para o ver aplicado. No entanto o Preset pode ser editado. Para tal basta abrir a layer de texto Onde editar o Preset e dentro de “Text“ há um parâmetro “Animator“ com subparâmetros passíveis de serem manipulados. É experimentar! leonardpeartree@gmail.com
  28. 28. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoParenting O que é o Parenting? O Parenting é uma técnica que permite criar movimentos entre objectos estabelecendo relações de hierarquia entre eles. Um objecto “filho”, pela atribuição de uma relação parental a outro, o “pai”, vai automaticamente seguir, de uma forma relativa, todos os movimentos que forem atribuídos ao “pai”. Como se aplica no After Effects? São necessárias duas layers! E é preciso linkar uma à outra! >> Criar uma layer de texto: • Menu Layer >> New >> Text; >> Escrever “Texto” com tamanho 100; >> Centrar o texto no enquadramento; 2 >> Criar uma layer solid: • Menu Layer >> New >>Solid; 1 >> Modificar o tamanho do sólido da layer: • Abrir Layer >> Transform >> Scale = 10% e 60%. >> Colocar o objecto Solid no centro inferior do enquadramento (por baixo do texto). >> Na layer texto, dentro do dropdown “None“ seleccionar “1.Black Solid” (1) >> Na layer “Black solid” animar a rotação da layer (2). Como podem ver a layer de texto, como está ligada à layer do sólido, segue o movimento que implementamos na layer “1.Black Solid”. É este o efeito de uma relação parental! leonardpeartree@gmail.com
  29. 29. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoNull Objects O que é um objecto Nulo? Um objecto Nulo serve para implementar uma forma particular de Parenting. É um objecto invisível que não sai no Output final do render, mas que é usado para servir de guia a outro objecto visível que vai seguir os movimentos implementados no objecto Nulo. Como se cria um objecto Nulo? Vamos criar uma situação! >> Criar uma layer de texto: • Menu Layer >> New >> Text; >> Escrever “Texto” com tamanho 100; >> Centrar o texto no enquadramento; >> Criar uma layer de objecto Nulo: 1 • Menu Layer >> New >> Null object; >> Centrar o objecto Nulo por baixo do texto: >> Na layer texto, dentro do dropdown “None“ seleccionar “Null 1” (1) >> Na layer “Null 1” animar a rotação da layer. Como podem ver a layer de texto, como está ligada à layer do objecto Nulo, segue o movimento que implementamos na Layer do objecto Nulo. leonardpeartree@gmail.com
  30. 30. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoPre-composing O que é o Pre-composing? O Pre-composing é uma operação que permite que os Motion Designers criem animações em objectos individuais e depois as agrupem numa única instância, que pode, a partir daí, ser animada como um todo agrupado em várias das suas propriedades. É um pouco como termos uma animação composta por vários elementos animados à qual vamos, depois, adicionar um movimento ou correcção de cor ao todo, por exemplo. Como se implementa o Pre-composing? Primeiro criamos uma situação! >> Criar várias layers e animar alguns dos seus parâmetros como posição e tamanho. >> Selecionar as várias layers. Dar um nome à Pré comp. >> Pré compor as layers selecionadas: • Menu Layer >> Pre-compose >> Move all... O After Effects cria assim uma composição nova que está dentro da composição inicialmente criada. Selecionar esta opção Agora vamos animar essa composição que agrupa as animações das layers que tinhamos feito antes. >> Transformar a layer da nova comp. numa layer 2 1 tridimensional clicando no Ícone do cubo (1). >> Abrir a Layer da nova composição (2). >> Animar a rotação da layer no eixo de Y (3). Como se pode ver o grupo de animações que 3 a layer composta tem ficam com uma segunda layer de animação em cima (rotação em Y) leonardpeartree@gmail.com
  31. 31. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoMotion Path O que é uma Motion Path? Uma Motion Path é uma linha invisível que vai descrever um percurso descrito por outra layer Como se implementa? Vamos criar uma situação! Vamos animar uma mosca a voar! >> Importar imagem da mosca; >> Criar composição com PAL DV1 com 4 segundos; Seg. 04 >> Arrastar o ficheiro da mosca para a Timeline; >> Criar Keyframes na posição da layer da mosca em tempos diferentes na timeline: • Accionar o stopwatch para se criarem Keyframes (1) Seg. 02 • No segundo 00: Posição X= 104; Y= 444 • No segundo 02: Posição X= 334; Y= 318 Seg. 00 • No segundo 03: Posição X= 394; Y= 472 • No segundo 04: Posição X= 630; Y= 148 Seg. 031 Seg. 00 Seg. 02 Seg. 03 Seg. 04 E correr a agulha da Timeline pela Timeline! Como se pode ver a Mosca realmente segue o Path desenhado mas a orientação da mosca não segue a Orientação da Path. Como é que podemos colocar a Mosca a seguir a orientação da Path? Vamos ver! leonardpeartree@gmail.com
  32. 32. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da Comunicação Orient O que é o Orient to Path? O Orient to Path permite orientar a orientação de uma layer em função da orientação que a Path doto Path seu movimento descreve. Como se implementa? É fácil. Vamos pegar na anterior animação e aplicar este recurso. >> Selecionar a layer da mosca; >> Accionar o Auto-Orient (1): • Menu layer >> Transform >> Auto-Orient 2 >> Na janela Auto-Orientation seleccionar o Orient along Path (2) e clicar em ok; Há um pequeno cuidado a ser tido. Na primeira Keyframe temos de orientar a mosca à orientação que a path descreve nesse momento. E aí ela já fica a voar na direcção certa. 1 leonardpeartree@gmail.com
  33. 33. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoEase in e O que é o Ease? O Ease é a propriedade de aceleração ou desaceleração de movimento de objectos. QuandoEase Out animamos alguma coisa no After Effects a velocidade do movimento é linear. O Ease quebra com linearidade da velocidade da animação. Como se implementa? É fácil. Esta propriedade não se aplica aos objectos ou layers em si mas sim às frames que contém o movimento descrito pelas layers. >> Começamos por seleccionar as duas Keyframes de uma animação na Timeline. >> Depois clica-se em cima de uma das Keyframes seleccionadas com o botão do lado direito do rato e aplica-se o seguinte caminho: • Keyframe assistant >> Easy ease, ou ainda, individualmente, Easy Ease in e Easy Ease Out. Conforme a seguinte imagem: E pronto. As Keyframes ficam com outra aparência e o objecto passa a ter um movimento mais fluido. Acelera e desacelera! leonardpeartree@gmail.com
  34. 34. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoMáscaras O que é uma máscara? Uma máscara é, como o nome diz, uma máscara utilizada para esconder parte de um objecto. Como se implementa? Para se desenhar uma máscara esta tem de estar aplicada a alguma coisa. Neste caso vamos aplicar uma máscara a uma layer. 1 2 >> Importar uma imagem. • Menu File >> Import >> File >> Escolher Ficheiro >> Arrastar essa imagem do Painel do projecto para a Timeline. >> Selecionar a layer para a “mascarar”. >> Selecionar, na barra de ferramentas, uma ferramenta de desenho para desenhar a máscara. • Ou a ferramenta de formas (1); • Ou a caneta (2); >> Com uma das ferramentas antes selecionada desenhar a máscara. 3 O AE gera na layer variáveis de manipulação da máscara criada (3). leonardpeartree@gmail.com
  35. 35. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoManipular Uma Máscara pode ser manipulada nas seguintes variáveis dentro da layer no item “Masks”: >> Feather - Dureza do recorte da máscara (1)Máscaras >> Opacity - Opacidade do que está mascarado (2) >> Expansion - Expansão do limite relativo da máscara (3) >> Inverted - Inversão da Máscara de positivo para negativo e vice-versa (4) 4 1 2 3 1 2 3 4 Todas estas variáveis, com excepção da “Inverted”, podem ser animadas ao longo do tempo, através da activação do cronómetro que se encontra em frente a cada uma e que permite criar Keyframes em cada variável. leonardpeartree@gmail.com
  36. 36. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoA Câmera O que é a câmera? A câmera virtual corresponde a camera de filmar real. E no After Effects a câmera é, virtual também, uma layer específica. 1 Como se cria uma câmera? >> Layer >> New >> Camera (1) Depois é só escolher um tipo de câmera e o tipo de lente associada e a nossa câmera aparece no painel das layers ao lado das outras layers da nossa composição (2). 2 Note-se que uma câmera pode igualmente ser animada como qualquer outra layer, embora o controlo da mesma seja algo complexo. Basta que se animem os seus parâmetros como vimos atrás na animação de outras layers, Dica: para um controlo mais eficaz da câmera pode ser útil associar-lhe um objecto nulo. leonardpeartree@gmail.com
  37. 37. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoA Camera E o ponto de interesse da camera? O ponto de interesse de uma câmera é o ponto para onde ela se dirige ou para onde a virtual câmera está “a olhar”. Onde é que definimos e manipulamos esse ponto de interesse? Na layer da câmera existe um parâmetro chamado “Point of interest“. É aí que definimos para onde é que a câmera está a olhar e podemos inclusivamente animar esse parâmetro. O método é sempre o mesmo! Ponto de interesse Note-se, no entanto, que podemos animar a posição e o ponto de interesse de uma câmera independentemente um do outro. Câmera propriamente dita leonardpeartree@gmail.com
  38. 38. Universidade do Minho Módulo MultimédiaInstituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo PereiraDepartamento de Ciências da Comunicação04Proposta de Trabalho de Animação TipográficaExercício e objectivos:São fornecidas ao aluno trechos de músicas que o aluno terá que ilustrar tipograficamente. O aluno tem de, apartir da animação tipográfica e de outros elementos gráficos criados por si, representar visualmente e atravésde animação o respectivo trecho da música escolhida. O aluno pode utilizar outros trechos à sua escolha, paraalém dos fornecidos.Deverá ter em conta:• As questões de Iconicidade que a Tipografia pode ter, tanto na sua configuração formal, como no seu comportamento cinético;• As questões e princípios básicos de animação e expressão antes apresentadas;• Os novos recursos técnicos leccionados no After Effects.• e claro... a relação entre o som e a imagem...Duração:A duração do filme deverá ter, pelo menos, 25 segundos.Entrega:Os alunos deverão entregar o trabalho em formato .mov até dia 28 de Abril leonardpeartree@gmail.com
  39. 39. Universidade do Minho Módulo Multimédia Instituto de Ciências Sociais Atelier Audiovisual e Multimédia I - 2010 | 2011 Professor Leonardo Pereira Departamento de Ciências da ComunicaçãoTutoriais Há alguns Tutoriais online sobre animação tipográfica que vos podem ajudar a colocar em prática o vosso exercício. Online Usem-nos! Eu sugiro que comecem exactamente por aqui! http://ae.tutsplus.com/tutorials/motion-graphics/design-rhythmic-motion-typography-in-after-effects/ http://vimeo.com/1271357 http://www.crookedgremlins.com/09/01/2008/kinetic-typography-tutorial/ leonardpeartree@gmail.com

×