28
ANIMAÇÕES WEB AULA 3 professor Luciano Roberto Rocha www.lrocha.com princípios da animação

AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Embed Size (px)

Citation preview

Page 1: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

ANIMAÇÕES WEB

AULA 3

professor Luciano Roberto Rocha

www.lrocha.com

princípios da animação

Page 2: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Animação - conceito

É a técnica que cria a ilusão de movimento a partir de uma sequência de desenhos ou imagens.

A palavra animação deriva do verbo latino animare que significa “dar vida” e só veio utilizada para descrever imagens em movimento no século XX.

A animação tem no movimento a sua essência.

Page 3: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Compreendendo o uso dos frame

Uma animação cor responde a uma seqüência de quadros dispostos lado a lado, com leves modificações entre um e outro e que exibidos ao longo de um período de tempo, geram mudanças percebidas como movimentos pelos olhos do espectador.

Page 4: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

IMPORTANTE

Tenha como base que uma animação não corresponde a algo se movendo, mas sim à

passagem de tempo e a modificação de algo durante essa passagem.

Page 5: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Alguns dados históricos

1645 - Invenção da “lanterna mágica” por Athanasius Kircher (caixa com fonte de luz e um espelho curvo que projetava slides pintados em lâminas de vidro)

Page 6: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Alguns dados históricos

1824 - Peter Roget publica um estudo sobre a capacidade do olho humano de reter uma imagem por uma fração de segundo, enquanto outra está sendo percebida. Essa descoberta ficou conhecida como “princípio da persistência retiniana”.

1825 - Taumatroscópio. Disco com uma imagem em cada lado, que ao ser girado rapidamente produz a ilusão de unir as imagens.

Fenaquistiscópio - Joseph Plateau - vários desenhos, distribuidos por uma placa circular lisa. Quando essa placa gira em frente a um espelho, cria-se a ilusão de uma imagem em movimento.

Page 7: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Alguns dados históricos

Page 8: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Alguns dados históricos

1834 - Daedalum ou Zootroscópio. Desenhos feitos em tiras de papel montados em um tambor giratório com frestas.

1868 - Quineógrafo ou flipbook - o mais simple e popular dispositivo de animação.

1877 - Praxinoscópio - Descendente do zootroscópio, criado por Émile Reynaud onde as aberturas do tambor são substituídas por espelhos.

Page 9: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Alguns dados históricos

1891 - kinetoscópio - Thomas Edison. aparelho que permitia gravar e reproduzir imagens.

1895 - Nasce o cinema. Os irmão Lumière são os primeiros a projetar filmes.

1920 - Gato Félix, criado por Otto Messmer. o primeiro personagem animado.

1928 - Criado os Estúdios Disney. Walt Disney revolucionou a animação, transformando-a em arte. desenvolveu a maior parte dos conceitos técnicos da animação, os quais são utilizados até os dias atuais.

Page 10: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Etapas de uma animação

Desenvolvimento do roteiro.

Montagem do storyboard.

Criação dos personagens.

Montagem do animatic.

Animação.

Finalização.

Page 11: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Esboço

Page 12: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Roteiro

Page 13: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Storyboard

Page 14: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Personagem - desenvolvimento

Page 15: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Personagem - modelagem

Page 16: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Animatic

Page 17: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Animação

Page 18: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Roteiro

Animar é um processo complexo, e nosso trabalho pode se torna muito mais agradável se o fizermos corretamente. O roteiro é uma etapa de grande importância, indispensável, afinal é aqui que se expõem as idéias e as organizam,

É a forma escrita de qualquer trabalho audiovisual. uma descrição objetiva das cenas, sequências, diálogos e até mesmo indicações técnicas do filme.

Na animação, bem como no cinema, o roteiro é a base do filme.

Page 19: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Exemplo de um roteiro (filme)

       CENA  1  -­‐  SUPERMERCADO  -­‐  INTERIOR/DIA

       ANDRÉ,  18  anos,  magro,  roupas  simples,  mochila  nas  costas,  está  na  fila  de  um  caixa  de  supermercado.  Atrás  dele,  um  HOMEM,  50  anos,  com  dois  pacotes  na  mão.  Atrás  do  homem,  uma  SENHORA,  40  anos,  e  uma  CRIANÇA  de  5  anos,  com  um  carrinho  cheio  de  compras.  André  Pra  do  bolso  sua  a  carteira  de  dinheiro  enquanto  a  MOÇA  do  caixa,  18  anos,  vai  passando  as  compras  de  André:  esponja  para  lavar  pratos,  detergente,  leite,  pão,  margarina,  fósforos.  André  confere  o  dinheiro  na  carteira.

       ANDRÉ        Quanto  deu  até  agora?

       MOÇA        Oito  e  vinte  e  cinco.

       ANDRÉ        Tudo  bem.

       Ela  passa  a  carne  e  registra.

       ANDRÉ        Quanto?

       MOÇA        Onze  e  trinta.

       ANDRÉ  (surpreso)        Quanto  é  a  carne?

       [CONTINUA]  

Este  é  um  trecho  do  roteiro  do  filme  “O  Homem  que  Copiava“,  de  Jorge  Furtado  -­‐  julho/  2001.Fonte:  www.roteirodecinema.com.br

Page 20: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Exemplo de um roteiro (VT)

CAMPANHA  IPTU  2008  -­‐  VT  30’’  (de  22  a  28  de  abril)Mosaico  dinâmico  (não  muito  quadrado)  formado  por  imagens  de  setores  diversos  atendidos  pela  prefeitura  e  locais  bonitos  da  cidade.

Locução:

-­‐  Com  a  sua  contribuição,  Ponta  Grossa    fica  cada  vez  melhor...

-­‐  ...  você  ainda  pode  economizar!

Sobre  mosaico,  entra  da  direita  para  a  esquerda,  a  frase  “IPTU  À  VISTA”,  em  letras  vazadas,  a  exemplo  da  campanha  gráfica.

Locução:

-­‐  Pague  o  IPTU  à  vista  até  28  de  abril  e  aproveite  o  desconto  de  15%.

Sai  mosaico  e  entra  sequência  de  imagens  mais  conhecidas  de  serviços  da  prefeitura:  (gente  sendo  atendida  na  saúde,  crianças  na  escola,  asfalto,  etc.)

INSERTE:  Leve  RG,  CPF  e  comprovante  de  endereço.

Locução:

-­‐  Vá  à  prefeitura,  faça  o  recadastramento  do  imóvel  e  rePre  o  seu  carnê.  É  simples  e  rápido.

Entra  a  arte  da  campanha  gráfica,  (“15%  de  desconto  para  pagamento  à  vista  até  28/04”)  com  efeito.

[CONTINUA]

Page 21: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Storyboard

É uma importantíssima ferramenta de construção e visualização de roteiros, que foi criada para os filmes de animação e depois teve sua utilização expandida para todo o tipo de produção audiovisual.

À primeira vista um storyboard parece uma história em quadrinhos. Apesar de o storyboard não ser uma HQ propriamente dita, por não possuir balões nem se destinar à reprodução, reserva as características de divisão de ação em quadros.

Page 22: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Storyboard

V i s u a l i z a r u m f i l m e através de um roteiro é muito difícil, e passar a idéia para o cliente é ainda mais problemático, e por este motivo que surgiu o storyboard, que é o roteiro desenhado em quadros.

Page 23: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Storyboard - exemplo

Page 24: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Ficha de storyboard (audiovisual)

Page 25: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Ficha de storyboard (website)

Page 26: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Personagens - desenvolvimento

Desenvolver personagens não é apenas desenhar uma figura, cada personagem tem sua forma de acordo com sua personalidade. O animador deve conhecer bem as características de seus personagens para poder construí-los usando as melhores formas.

Uma boa prática consiste em dividir seus personagens em par tes com o in tu i to de ag i l i za r o p rocesso de desenvolvimento das animações, reaproveitando as parte já criadas.

Pode-se dividir pernas, braços, cabeça, boca, olhos, etc.

Page 27: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Personagens - o uso do modelsheet

Em animação, o modelsheet é um documento usado para auxiliar a padronização da aparência, poses e gestos de um personagem.

Ela serve como referência para garantir que durante o processo de reprodução do personagem nenhum detalhe importante seja esquecido, mesmo que desenhado por mais de uma pessoa.

Page 28: AULA 3 - lrocha.com.brlrocha.com.br/arquivos/arquivos/AnimaWeb (Flash)/AULAS/anim_web_A3.pdf · Ela serve como referência para garantir que durante o processo de reprodução do

Modelsheet - exemplos