Sala de Aula 2

Prévia do material em texto

Técnicas de Animação
Definição
Descreveremos as principais técnicas de animação, conhecidas amplamente como técnicas clássicas, tradicionais, modernas e
contemporâneas, alcançando a animação digital. Identificaremos os seus principais representantes, com exemplos comentados de
diversos produtos de animação.
Veremos os conceitos da animação e seus principais avanços, que irão nos nortear na concepção de linguagem de animações,
observando como as técnicas passaram a se misturar e a criar estéticas visuais próprias, independentemente do seu suporte.
Finalmente, conhecendo as formas mais apuradas de animação por computador, construiremos animações estruturadas e
desenvolveremos um estilo próprio.
Objetivos
MÓDULO 1
 Identificar os principais representantes e as técnicas clássica e tradicionais da animação.
MÓDULO 2
 Examinar as técnicas da animação modernas e contemporâneas.
MÓDULO 3
 Analisar os principais conceitos relativos à animação digital, sua evolução e seu desenvolvimento.
MÓDULO1
 Identificar os principais representantes e as técnicas clássica e tradicionais da animação.
 Fonte: Museu de Arqueologia Nacional da França
Introdução
O homem sempre demonstrou seu desejo pela reprodução de movimento através da imagem. A procura por representações
gráficas capazes de registrar um corpo em ação é observada, por exemplo, nas gravuras rupestres.
Em diversos exemplos temos sugestões de movimento
ainda mais intenso, como animais pintados em cavernas
ostentando bem mais patas do que têm na realidade”.
- (LUCENA, 2002)

Saiba mais
Lascaux
Na Caverna Lascaux, a rocha serviu de suporte, suas paredes e tetos receberam acabamento, desenhos variados e cores.
Podemos considerar que a Caverna de Lascaux serviu de veículo de comunicação e a mediação foi realizada pelos desenhos encontrados
javascript:void(0);
Na França, a caverna de lascaux , também chamada de Capela Sistina da Pré-história, e a caverna de chauvet são as mais conhecidas
pelas suas paredes figuradas. Visite virtualmente as cavernas
Podemos considerar que a Caverna de Lascaux serviu de veículo de comunicação e a mediação foi realizada pelos desenhos encontrados
em seu interior.
�Caverna Lascaux, Sala dos Touros, 19000 E.C. França.| Fonte: Archeologie Culture
Chauvet
Na Caverna Chauvet (patrimônio mundial da Unesco), foram encontradas mais de mil pinturas nas paredes e no teto interno de toda a
extensão da caverna, datadas de 36 a 30 mil anos a.C. ou E.C. (Era Comum).
As pinturas foram feitas nas cores ocres e preto (provavelmente do pó do carvão vegetal).
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
javascript:void(0);
�Painel da Caverna Chauvet. 36000-30000 E.C. França | Fonte: Archeologie Culture
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
É importante ter em mente que essas narrativas apresentam diversas fases e modos de representação humana registrada em forma de
“histórias figuradas”. A história da animação revelou uma série de técnicas muito interessantes que ajudaram a montar a indústria da
animação e, por assim dizer, a indústria do entretenimento também. Estudando cada uma dessas técnicas, poderemos saber um pouco
mais como as pessoas da época pensavam suas soluções para criarem a ilusão do movimento.
javascript:void(0);
Devemos lembrar que, na época, os recursos tecnológicos eram escassos e a humanidade vivia plenamente a
segunda revolução industrial, quando ocorreram grandes descobertas que mudaram de vez o panorama da
indústria e do capitalismo, gerando, assim, uma relação de ganho pelo trabalho e a divisão social entre burguesia e
proletariado. Isso criou um contingente de pessoas que não tinha muitas posses. Esses trabalhadores
necessitavam de descanso de sua jornada de trabalho e, nas grandes metrópoles que surgiam, o entretenimento
barato era uma oportunidade interessante para inventores ganharem um bom dinheiro.
Os números de magia nos teatros eram muito comuns na época e grandes mágicos tornaram-se conhecidos por
criar ilusões elaboradas. A necessidade da tecnologia e seus avanços fizeram surgir grandes inventores.
Juntamente com as ciências, grande parte das melhorias em máquinas eram também utilizadas nesse segmento.
Foi a oportunidade perfeita para indivíduos criativos se destacarem e, mesmo não tendo muito sucesso
ascendendo para a casta burguesa, acabaram colocando seu nome na história da animação.
Fonte: Shutterstock | Por: Demina Ekaterina
Com as transformações relacionadas à evolução da tipografia, que permitia a difusão da informação por meio impresso e rentável, veio a
oportunidade para introduzir a representação do movimento além do já conhecido teatro de sombras .
Surgiu uma nova percepção do que seria a imagem, que passou pela criação da câmera escura, que permitia a concentração dos raios
luminosos, e chegou na invenção da lanterna mágica, sua sucessora, com sua capacidade de projetar slides, alcançando a revolução
causada pela fotografia.
teatro de sombras
Acredita-se que o teatro de sombras tenha surgido ainda na Pré-história, quando nas sombras produzidas pelo fogo da fogueira, o homem
das cavernas reproduzia relatos para o seu grupo.
A arte milenar de contar uma história ou mostrar uma narrativa usando imagens feitas por sombras a partir das mãos, fantoches ou outros
objetos é muito associada à cultura chinesa tradicional.
�Fonte: Shutterstock | Por: Tanwa Kankang
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Animação Direta
É o caso de émile cohl (1857-1938), um dos pioneiros da animação, juntamente com John Stuart Blackton (1875-1941). Eles lançaram
as bases do setor no início dos anos 1900, com caricaturas simples e bonecos. Cohl é creditado na história como o criador do primeiro
desenho totalmente animado: Fantasmagorie (1908). Ele também foi o primeiro a adaptar uma história em quadrinhos a uma série regular
de filmes de animação. Cohl foi, além disso, um caricaturista bem conhecido em sua época e fez alguns quadrinhos ele mesmo.
Émile Cohl
Biografia
Émile Cohl nasceu em 1857 em Paris com o nome Émile Eugène Jean Louis Courtet. Seu pai era vendedor de borracha, enquanto sua
mãe costurava linho, atividades comuns de cidadãos comuns de uma metrópole. Sua família muitas vezes teve que lutar para conseguir
dinheiro e ele raramente via seu pai.
 
Em 1863, quando tinha seis anos, sua mãe faleceu. Ele foi enviado para a École Professionelle de Pantin - mais conhecido como o
Instituto de Internato Vaudron. Lá ele descobriu que tinha talento para desenhar, mas a Guerra Franco-Prussiana (1870-1871) levou sua
vida para uma direção diferente. A fábrica de seu pai foi forçada a fechar e Cohl foi enviado para uma escola menos cara: a École Turgot.
Cohl encontrou um novo passatempo nos teatros de marionetes de Guignol trabalhando como caricaturista político. Durante o cerco
prussiano de Paris, ele conseguiu dar aos cidadãos locais muito escapismo através dessas ocupações. Cohl trabalhou como aprendiz de
um joalheiro, um corretor de seguros marítimos, antes de trabalhar para uma filatelista. Ainda assim, a caricatura continuou sendo um
dos seus hobbies.
Em 1878, ele se tornou assistente de André Gill (1840-1885), que já era um dos caricaturistas mais famosos da França. Durante toda a
sua vida, Cohl permaneceu fiel ao seu mentor, mesmo quando Gill foi institucionalizado e abandonado por todos os seus outros amigos.
Na mesma época, o jovem caricaturista adotou seu pseudônimo "Émile Cohl". O jovem cartunista rapidamente ganhou fama ao desenhar
dois cartuns dirigidos ao presidente francês Patrice MacMahon. O tom ácido de seu trabalho levou Cohl a ser multado e condenado a dez
dias de prisão.
 
Na virada do século XIX para o século XX, Cohl fez mais uma mudança de carreira, apesar de já ter 50 anos de idade. Em 1907 ele se
tornou roteiristaforam desenvolvidas, e os princípios da animação clássica foram preservados, cabendo ao
desenvolvedor de jogos aplicar da melhor maneira os conceitos dentro de seu projeto de game.
Animação 3D
Relacionando tudo o que vimos em stop motion e 2D com o 3D, podemos observar que:
� Fonte: Shutterstock | Por: StarLine.
Fonte: Shutterstock | Por: Melkor3D.
Normalmente, o 2D envolve "desenho", ou movimento, digamos, de uma superfície plana (bloco de desenho etc.) ou nos planos vertical e
horizontal. Mas a evolução da animação digital também passou a exigir a criação de técnicas mais elaboradas para criação, customização
e movimentação de personagens e objetos.
Assim, surgiu a animação 3D, cujas técnicas tornam muito perceptíveis as noções de profundidade, perspectiva e de um ambiente mais
próximo à realidade, envolvendo "modelagem", isto é, a criação de objetos em três dimensões usando um software de computador, um
ambiente virtual expansivo, completo com luzes, reflexões, outros objetos, sombras etc.
Animação 2D x 3D
A primeira coisa devemos lembrar é que 3D significa tridimensional e 2D significa bidimensional. Agora, antes de pensarmos que essa
afirmação é óbvia, vamos refletir: 3D e 2D em animação se referem à dimensão em que a animação foi criada. Isso nos oferece uma outra
perspectiva sobre complexidade, certo?
Animação 2D
Tudo acontece em uma plataforma bidimensional.
As imagens são planas, sem profundidade e oferecem apenas uma perspectiva.
Objetos e personagens geralmente são desenhados sem as sutis sombras suaves que vemos na vida real e as cores têm poucos tons
variados.
2D é uma pintura.
Animação 3D
Tudo acontece em uma plataforma tridimensional.
TAs imagens têm profundidade e oferecem múltiplas perspectivas, para que não apenas vejamos um retângulo (2D), mas também um
CUBO, assim como na vida real, e sombras suaves e sutis projetadas nos objetos e personagens.
3D é uma escultura.
Dica
Você pode começar seu treinamento comparando animações como:
2D: Pernalonga; Aladdin; Lion King.
3D: Toy Story 1, 2 e 3; Procurando Nemo; Os Incríveis.
O processo de criação de animação 3D pode ser dividido seqüencialmente em três fases:
Modelagem – descrição do processo de criação de objetos 3D em uma cena.
Layout e animação - que descreve como os objetos são posicionados e animados em uma cena.
Renderização - que descreve a saída final da computação gráfica concluída.
Com a combinação das fases acima e de algumas outras subfases, o processo de produção de animação em 3D estará completo.
O processo animação 3D é complexo e pode ser muito mais complicado do que qualquer outra forma de animação. Dependendo do projeto
e do estúdio de animação 3D envolvido, o número de etapas pode variar.
Listamos aqui 11 etapas mais comuns envolvidas na produção de um projeto de animação em 3D:
� Fonte: Shutterstock | Por: rikkyall; Rashad Ashur; Crocolot.

Saiba mais
foley 
rigging 
Foley
Foley é a reprodução de efeitos sonoros complementares de um filme, vídeo ou de outros meios audiovisuais na pós-produção para
melhorar a qualidade do áudio. É conhecido também como sonoplastia.
Rigging
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Animação esquelética ou rigging é uma técnica de animação por computador, na qual um personagem (ou outro objeto articulado) é
representado em duas partes: uma representação da superfície usada para desenhar o personagem (chamada de pele ou malha) e um
conjunto hierárquico de ossos interconectados (o chamado esqueleto ou rig) utilizado para animar (pose e quadro-chave) a malha.
Embora esta técnica seja frequentemente utilizada para animar seres humanos ou para modelagem orgânica em geral, ela só serve para
tornar o processo de animação mais intuitivo e a mesma técnica pode ser usada para controlar a deformação de qualquer objeto — uma
porta, uma colher, um edifício ou uma galáxia. Quando o objeto animado é mais geral do que, por exemplo, um personagem humanoide, o
conjunto de ossos pode não ser hierárquico ou interligado, mas só representar uma descrição de alto nível do movimento de um pedaço de
tecido ou de pele que ele influencia.
� Animação esquelética | Fonte: Wikimedia.
Rasterização e sprites
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Para se fazer uma animação, deve-se entender que são necessário fotogramas (imagens compostas pelos animadores). Vimos que o
principal problema dos fotogramas ao longo da história é que eles eram desenhados todos um a um. A grande revolução nesse aspecto foi
o desenvolvimento de celuloide, que ajudou na eficiência da produção das animações, saindo assim da animação clássica para a
javascript:void(0);
tradicional.
Vamos entender o princípio de camadas, muito comum na manipulação de imagens e na computação gráfica:
� Fonte: Arena Animation.
Cada fotograma agora é dividido em uma camada transparente, como um papel celuloide.
Elementos animados separadamente, como um homem, uma árvore e o cenário compõem um conjunto de camadas que, quando
sobrepostas, geram um fotograma.
Nos computadores, podemos gerenciar cada camada individualmente através de uma linha do tempo (timeline) da animação. Assim,
precisamos rasterizar as imagens para o computador, reconhecer esses elementos e colocá-los em cada fotograma de sua respectiva
camada.
A saída de cada fotograma pode ser padrão, e o conjunto dessas imagens gera um arquivo de imagem a ser colocada na timeline da
animação. Essa técnica de rasterização foi muito usada no início da animação por computador, dando pouco tempo depois espaço para os
sprites .
A seguir vamos conhecer mais sobre cada uma dessas etapas e técnicas.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
� Fonte: Shutterstock | Por: Eloku.
linha do tempo (Timeline)
Todas as animações ocorrem em uma sequência no que é comumente conhecido como uma timeline. Essa interface permite gerenciar as
animações em uma linha corrida, obtendo uma perspectiva visual de como toda a sequência se encaixa.
sprites
Termo da computação gráfica, na animação 2D, que representa um elemento manipulável dentro de um programa.
Sprites não são simplesmente quadros ou imagens por si sós; as imagens contêm informações sobre a forma como devem ser exibidas
por meio de informações binárias codificadas.

Saiba mais
Pode-se usar um scanner para transformar imagens analógicas em digitais, colorindo-as com qualquer programa de manipulação de
imagens digitais. Elas também podem ser produzidas totalmente por computador, usando mesas digitalizadoras e programas de pintura e
vetorização.
 Os sprites possuem os mesmos princípios das imagens rasterizadas comuns, mas elas são ainda mais individuais. Com o avanço da
computação gráfica, foi possível manipular mais de um elemento por camada – pedaços de um todo que podem ser trabalhados na
animação de forma simultânea, cabendo ao animador dividir tudo em seu palco de trabalho, o stage.
Qual a função dos sprites nos jogos digitais?
Clique no botão acima.
Sprites são importantes porque fornecem imagens com propriedades dentro do nosso jogo que podemos animar.
 
Seria um trabalho muito complexo se tivéssemos que cortar e montar cada quadro da sua imagem inteira no jogo para quadros
menores apenas para exibir o seu jogo e animar todos os seus elementos quadro a quadro.
Praticamente todas as engines de desenvolvimento possuem seus espaços de trabalho para manipulação de elementos 2D com
sprites. Existem tutoriais, bases de conhecimento e referência bibliográfica amplamente disponível para eles.
 
Você pode criar um jogo totalmente com sprites sem as referências de imagens, programando os comportamentos e eventos.
Em termos de desenvolvimento de jogos, um sprite contém informações de uma imagem comoum elemento a ser exibido em
uma tela.
Esse é o detalhe mais importante:
Sprites em 2D precisam ser representados no espaço bidimensional. Isso significa que precisam, pelo menos, de uma propriedade
de coordenada X e Y para posicioná-los no espaço 2D.
Compreender sprites e como eles funcionam no seu jogo alavancará seus projetos de
desenvolvimento de jogos ainda mais.

Importante
Imagine que sprites não são somente personagens, mas muitas outras coisas que podem se transformar na tela: tiros, lasers, bombas,
efeitos especiais, caixas, inimigos. Tudo que precisa ser animado dentro da mecânica do jogo deverá se tornar um conjunto de Sprites, e
estes podem seguir diversos caminhos, a depender do software usado.
Os sprites são apenas contêineres: são mais uma construção de programação para mostrar
partes específicas da imagem quando solicitadas.
Muitos desenvolvedores chamam sprites de quadros.
Pode-se também alterar o tamanho do quadro do sprite exibido. Para isso, o sprite precisa de uma propriedade de escala alterando
o tamanho.

Atenção
Lembre-se: todos esses artifícios nos sprites seguem rigorosamente os conceitos Euclidianos da geometria de objetos.
 Fonte: Freepik | Por: Stockgiu.
Pode-se estabelecer uma propriedade de rotação, para girar o sprite por ângulos. A última propriedade que podemos apresentar é
a imagem anexada ao sprite, isto é, o que o sprite exibe como um personagem ou objeto em seu jogo 2D.
Todas essas são propriedades básicas do objeto sprite em praticamente qualquer jogo que usa essa técnica e que cria o conceito
abstrato de um sprite.
� Fonte: Shutterstock | Por: Ain Mikail.
Muito usados nos jogos digitais, os spritesheets são conjuntos de imagens mapeadas para criar uma animação.
A técnica de uso de cada tipo de sprite varia conforme o programa e o estilo do animador que, dependendo da mídia em questão, deverá
consultar um programador para ver qual o melhor formato de trabalho.
spritesheets
Muitos programas usam as spritesheets ou folhas de sprites. Jogos clássicos, como Legend of Zelda, e até mesmo jogos modernos, como
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Cut the Rope, os usaram.
Vamos entender o que é animação com spritesheets e como codificá-los, demonstrando como podem ser aplicados em um jogo.
 
Spritesheets são usados para acelerar o processo de exibição de imagens na tela para uma animação 2D. É muito mais rápido buscar uma
imagem e exibir apenas uma parte dessa imagem do que buscar muitas imagens e exibi-las.
Este é um importante segredo no processamento de jogos:
Quanto mais arquivos cambiáveis em um game, mais carregamento na memória e
processamento serão necessários.
A animação de um spritesheet nada mais é do que pegar ele mesmo e mudar para qual sprite é renderizado em rápida sucessão, dando a
ilusão de movimento, exatamente como acontece em outras experiências de animação.
 
Spritesheets são compostos de duas partes:

Saiba mais
quadros 
Quadros
Um quadro é uma única imagem (ou sprite) da spritesheet.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Fonte: Shutterstock | Por: cherezoff.
Para completar esse procedimento, são necessários três passos:
1 - Criação da imagem
Trata-se de uma função (ou classe) que manipulará a animação no spritesheet, criando a imagem e definindo o seu
local para que possamos usá-lo para desenhar.
Como spritesheets diferentes podem ter tamanhos de quadros diferentes, é necessário passar a largura e a altura
do quadro para que se possa calcular com precisão quantos quadros estão em uma linha e coluna da imagem.
É importante que cada quadro da spritesheet tenha a mesma largura e altura; caso contrário, desenhar a animação
na tela será muito mais difícil.
2 - Atualização da imagem para cada quadro da animação
Para atualizar a animação no spritesheet, devemos alterar o quadro que será desenhado. É necessário informar no
código quantos quadros totais serão necessários e o tempo para cada quadro antes de uma transição.
Note que nem todos os spritesheets têm um sprite em cada quadro disponível. É fundamental informar no
código qual é o último número do quadro, para que não sejam animados quadros vazios.
3 - Desenho do quadro na tela
desenhar uma imagem a partir de um spritesheet funciona exatamente da mesma maneira que desenhar uma
imagem a partir de qualquer elemento inserido dentro da biblioteca de objetos no jogo.
A maioria das engines de jogos utiliza as folhas de sprites para trabalhar, como a Unity, Unreal, Godot, dentre
outras.
Desenhar uma imagem
1 - Calcular a linha da imagem que se quer desenhar tomando o módulo do quadro atual e o número de quadros por linha.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
2 – Calcular a coluna dividindo o quadro atual pelo número de quadros por linha.
3 – Usar essa linha e coluna (pode-se calcular as coordenadas do quadro para desenhar multiplicando-as por largura e altura,
respectivamente).

Atenção
Outra gama de softwares para animação utiliza os sprites de forma diferente: como uma representação e entendimento de sua interface a
partir de uma abordagem tradicional da animação.
 
É o caso de ferramentas como ToonBoom, MOHO, Synfig, Spriter, Opentoonz, Flipbook e o Adobe Animate.
 
O Adobe Animate é descrito como sendo uma evolução do Flash Professional; um produto cuja natureza proprietária estava condenada aos
livros de história quando Steve Jobs recusou colocar o plugin do Flash em seus dispositivos iPhone.
 
O Flash era, no final dos anos 1990, a ferramenta mais usada para animação nas mídias digitais, principalmente na internet, e ganhou muita
notoriedade. O Flash tinha grandes ferramentas, mas seu compliance com diversos padrões acabou sendo superado pelo HTML 5.
 
Contudo, a Adobe refez seu programa de animação, que, na verdade, foi criado pela antiga empresa Macromedia, e remodelou toda sua
plataforma para o Animate.
Linha do tempo e controladores
Para quase todos os tipo de animação, os programas de animação hoje se baseiam nos features do antigo Flash. Por isso, usaremos o
Animate para apresentar alguns dos principais elementos da animação digital usando os símbolos. Os desenvolvedores do antigo Flash
entenderão muito bem esses conceitos.
As linhas de tempo podem incluir animações refinadas em um contexto baseado em quadros. Isso significa que os artistas podem criar
animações isoladamente e integrar esses movimentos independentes em um cronograma mestre maior, dividindo, inclusive, partes da
animação em camadas, usando os mesmos princípios de programas tradicionais de manipulação de imagens.
Dentro da linha do tempo, são inseridos os sprites. Contudo, os programas interpretam apenas os sprites como elementos de imagem. Eles
podem ganhar um componente ainda maior: ser instanciados como símbolos e um conjunto de sprites em um clipe de filme.
Esses padrões de elementos permitem:
1
Maior controle da animação.
2
Manipulação por controladores.
Como estamos trabalhando com mídias interativas, provavelmente o desenvolvedor precisará que os sprites sejam controlados . 
 
Dessa maneira, foram criadas as instâncias e controladores. A partir do momento que o animador determina que uma imagem se torne um
símbolo ou clipe de filme, ele poderá ser manipulado pelo programa.
controlados
Podem ser controlados por comandos do teclado, cliques do mouse, arrastados ou qualquer outro movimento não contínuo como uma
animação de filme, em que não se pode alterar qualquer estado dos sprites, por exemplo.
Dica
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Uma grande vantagem, por exemplo, seria transformar os elementos do cenário de um jogo em símbolos. Eles ficarão na biblioteca do
projeto e poderão ser inseridos por meio de instâncias desse objeto. Isso quer dizer que,se o arquivo original dentro do símbolo for
alterado, todas as suas instâncias também serão alteradas.
Com os objetos instanciados, é possível inserir o código de programação para fazer uma infinidade de coisas:
Mudar cores e transparência.
Ajustar matiz e valor de cor de determinados elementos.
Mover na tela e interagir com outros objetos.

Atenção
A partir do Flash, usou-se as derivações da linguagem Javascript para realizar essa programação. Portanto, qualquer animador que tiver
também afinidade com codificação em Javascript também poderá gerar instâncias de controle.
 
Para os que não sabem, os programas, inclusive o Adobe Animate, possuem transformadores e scripts pré-formatados para facilitar o
trabalho. Diversos tutoriais na Internet possuem exemplos e tutoriais explorando essas plataformas e com criatividade, gerando projetos e
asset muito interessantes para usar em jogos.
Exportação
Os programas de animação de engines de jogos e de Animação Digital precisam um do outro. Neste caso, é importante que, no processo de
modelagem do sistema de jogo, se saiba claramente para que plataforma o game será usado.
Encorajamos os times de desenvolvimento, antes de usar qualquer plataforma de jogo, a
verificar quais as propriedades de importação e exportação possíveis.
Talvez uma das maiores lições que se pode passar neste caso são as animações para a Internet. Trazendo de volta o caso do programa
Flash, comprado pela Adobe da Macromedia, a Adobe acreditava que o padrão de arquivo .swf poderia evoluir muito e ser, assim como o
DVD, um formato mundial, gerando lucros enormes.
Não somente o caso Steve Jobs, que deliberadamente proibiu rodar arquivos Flash nos iPhones, mas o advento do html5 praticamente
matou o Flash.
HTML5
O HTML5 é a linguagem de marcação para a web atual e, dentro dela, pode-se animar e interagir com objetos, imagens, vídeos e muito mais.
Junto com o sistema de folhas de estilos CSS3, é possível manipular os objetos até em 3D.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
� Fote: Shutterstock | Por: kirill_makarov.
O Adobe Animate CC tem total suporte para o HTML5, por motivos óbvios. A Internet é hoje o maior demandante desse tipo de mídia. O
próprio Animate também exporta seu projeto de timeline para o formato spritesheet, a ser usado em engines de jogos.
O Animate, então, se tornou um programa híbrido, concorrente como tantos outros que já estudamos. É claro que todos os seus
concorrentes também possuem as mesmas features, em um mercado repleto de opções.
Dica
Concentre-se na maneira que você gosta de animar e em qual programa mais se adapta ao seu estilo de organizar o trabalho. Aprenda a
usar os sprites e instanciar adequadamente símbolos e clipes de filme para criar as animações e cenas que serão usadas na plataforma
desejada.
Interpolação e keyframes
Um tweening (ou interpolação), também definido como inbetweening, é o processo de geração de quadros intermediários entre duas
imagens para dar a aparência de que a primeira imagem evolui suavemente para a segunda. Entre os desenhos, estão os quadros-chave
que ajudam a criar a ilusão de movimento. O inbetweening é um processo essencial em todos os tipos de animação, incluindo animação por
computador.
As interpolações de movimento incorporadas nos programas de animação são aplicáveis 
somente a objetos de instâncias particulares de símbolos de clipe de filme e campos de texto
que precisam de manipulação.
Outros tipos de objetos (por exemplo, desenhos ou formas) devem primeiro ser envolvidos em um símbolo quando a interpolação é
aplicada a eles.

Atenção
Sugerimos que você não deixe que os programas façam isso automaticamente, ou seja, é sempre bom pensar adiante e transformar os
desenhos em símbolos antes.
Para uma animação fluida, é preciso desenhar todos os quadros entre cada chave (keyframes ). Existe uma relação de tempo para cada
quadro desenhado. Os computadores precisam receber a sequência exata de etapas para executar uma ação e gerar de forma automática
certos frames (quadros) da animação. Atualmente, podemos criar essas sequências de etapas, ou um algoritmo para elas, que ajuda o
computador a desenhar o necessário para criar uma animação suave.
Toda a animação começa com a criação dos quadros-chave a partir dos desenhos base rasterizados e transformados em elementos de
sprites.
1
Desenhos base rasterizados
2
Transformação em elementos de sprites
�
3
Criação dos quadros-chave
4
Animação
keyframes
Keyframes são os momentos-chave de uma animação. Como o nome diz, eles são a “chave”(key) de todos os frames de uma animação.
Neles ficam claras as diferenças nas ações de um personagem, mudanças cruciais no movimento, ou até grandes poses.
Leia mais sobre os keyframes aqui.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
javascript:void(0);
Na Animação Digital, os keyframes determinam a mudança em relação à pose ou momento anterior, e é neles que a animação é realmente
construída. Uma diferença fundamental entre a animação tradicional e a animação digital é:
Animação Tradicional
Os animadores criam as interpolações uma por uma entre os keyframes. Eles são os responsável por criarem o timing e ritmo
corretos do movimento.

Animação Digital
O software é o responsável por calcular e interpolar as animações. Cabendo ao animador controlar como as interpolações
acontecerão.
Fonte: Shutterstock | Por: FrameStockFootages.
Podemos fazer a animação de qualquer coisa agora, mas perceba que existe toda uma escola de animação que acabamos de conhecer,
que nos ensina valiosos conceitos para criar animações que, aos nossos olhos, melhoram, por meio da ilusão do movimento, a percepção
de uma ação.
Símbolo
Um símbolo pode ser um simples gráfico, um botão ou um clipe de filme criado e reutilizável no mesmo documento ou em outros. Cada
símbolo que você usa/cria é inserido na biblioteca.
O símbolo em si nunca é usado diretamente em uma animação; sempre se deve criar uma
instância.
Em termos práticos, isso significa que se deve arrastar o objeto da biblioteca para a cena e, em seguida, fornecer um nome como
discutido a seguir.
Para um programador, um símbolo pode ser entendido como um tipo de classe (ou seja, um objeto genérico). A recomendação, para
isso, é:
tipo de classe
Podemos usar símbolos como classes na linguagem de código do programa.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Animações com apenas um objeto Animações com vários objetos
Animar uma única instância de um símbolo na mesma camada por vez. Use várias camadas ou clipes de filme incorporados.
 Atenção! Para visualização completa da tabela utilize a rolagem horizontal
Os programas de animação mais conhecidos possuem uma interface gráfica intuitiva e, para tarefas mais simples, não é necessária
nenhuma linha de código. Eles usam palcos (stage) onde a animação ocorrerá.
Ela pode ser configurada com a velocidade de quadros e tamanho. Como vimos, podemos criar camadas sobrepostas a este palco.
Criando tweenings
Para criar um tweening simples, podemos usar o seguinte método:

Atenção
O elemento deve estar no primeiro quadro-chave para sua animação. Ou seja, o objeto está esperando no quadro-chave 1 para ser movido. A
próxima etapa é criar um segundo quadro-chave.
Para criar um tweening simples no Adobe Animate, podemos usar esse outro caminho :
Dica
No Animate, clique em um quadro aleatório entre os dois quadros-chave (ainda na mesma camada). Em seguida, clique com o botão direito
do mouse e selecione Criar interpolação (clássica) de movimento.

Saiba mais
Como alternativa, você também pode usar o menu suspenso Tween no painel de propriedades na parte inferior e selecionar o movimento. A
linha do tempo para a camada que inclui esse objeto deve agora incluir uma linha sólida com uma seta (se estiver tracejada, algo deu
errado).
É possível ver o objeto movidopara uma posição diferente em algum lugar no meio dos dois quadros-chave ao longo da timeline. Essa seria
a forma mais simples de animar, em que o computador cria automaticamente os quadros entre as chaves.
Claro que, se o símbolo dessa animação for um clipe de filme de um ciclo de um personagem caminhando, a ilusão de que ele está saindo
de cena é real.
 
Por meio de várias outras camadas, é possível inserir outros elementos estáticos ou animados, simulando o velho estilo da trucagem da
Disney. Alguns programas possuem manipuladores mais inteligentes como rotacionar, aumentar o tamanho etc.
Quando a interpolação inclui uma trajetória (em oposição a uma rotação, por exemplo), um “caminho de movimento” deverá ser desenhado
no palco. Esse caminho mostra a posição do objeto em cada quadro de interpolação. Em cada quadro, pode-se alterar a posição do objeto e
a trajetória interpolada mudará.
 
Para fazer isso, arraste o objeto para outra posição da mesma maneira que uma interpolação simples. Isso criará novos quadros-chave e,
portanto, modificará o caminho.
Finalmente, em cada quadro-chave (iniciando, finalizando e aqueles que foram adicionados ao longo do projeto), pode-se transformar outras
propriedades do objeto, como matiz, posição 3D e muito mais.
 
Lembre-se de que, nesse caso, você nunca alterará o gráfico em si, mas aplicará um “filtro” para ele.
 
Chamamos esses elementos de transformadores. Dependendo do programa, eles agregam muitos efeitos. Talvez essa seja a principal
diferença entre os programas de animação digital e as engines de jogos: a facilidade de criar e manipular os quadros-chave e a gama de
features de filtros e transformadores.
Os mais comumente usados são os transformadores de escala, dando sensações de aproximação. Os filtros de desfoque também são
muito aplicados, principalmente, se no projeto de animação for usado o efeito paralaxe para dar a ideia de perspectiva.
Aqui abordamos a animação como elemento de uma composição maior. Animadores tradicionais criam todas as animações na
linha do tempo principal (cenário), como um conjunto de elementos e momentos, definidos pelo roteiro e pelo Storyboard. O
cenário será, então, dividido em sequências, chamadas de cenas.
 
 Por smolaw (Fonte: Shutterstock).
Em vez disso, um desenvolvedor Flash moderno tenderia a colocar animações individuais dentro de um “clipe de filme”
incorporado e, em seguida, pôr esses clipes no espaço e no tempo.
Clipe de filme
Um símbolo de clipe de filme tem sua própria linha do tempo mas também pode incluir outros clipes de filme.

Exemplo
É importante que você faça um projeto de modelagem dessa animação, devidamente documentado, para que possa criar
exatamente o que se deseja, principalmente se esses elementos receberem instâncias programadas.
Você pode criar um clipe de filme chamado “animação de pássaro”.
Nele, pode fazer um objeto em movimento (“pássaro”), que, por sua vez, baterá suas asas.
Essas asas são novamente símbolos embutidos em um terceiro nível.
 
Teremos a seguinte hierarquia: Animação de pássaro -> Pássaro -> Asas.
� Fonte: Shutterstock | Por: Maquiladora.
Como programar uma animação em HTML5?
� Fonte: Shutterstock | Por: wilky may.
Na animação tradicional (desenhada à mão), um artista desenha quadros-chave que definem o movimento. Em um determinado tempo de
filme, ou quadros, alguns desenhos-chave são feitos. 
Um assistente, geralmente um estagiário ou um artista júnior, desenha as conexões de desenhos extras necessárias para a cena em
questão. O trabalho do assistente, também chamado de inbetweener, é fazer com que as transições entre as poses-chave pareçam suaves
e naturais.
� Fonte: Shutterstock | Por: wilky may.
Percebemos também que os Inbetweens são necessários desde que as animações sem elas pareçam fluidas.

Saiba mais
Infelizmente, o desenho de objetos intermediários é um trabalho mais ou menos pesado.
Os Estúdios Disney, por exemplo, tiveram mais de 1000 funcionários trabalhando em seus filmes. Principalmente, na criação dos quadros
intermediários.
Vimos também que a virada do século XXI trouxe os computadores que podem lidar com esse tipo de tarefa, gerando automaticamente os
quadros-chave. Mas devemos compreender que o computador nunca substituirá (pelo menos ainda) o trabalho artístico do homem.
 
Para que uma animação digital tenha o efeito desejado com primor, os computadores precisam receber a sequência exata de etapas para
executar a ação exatamente da forma como foi planejada.
 
Alguns estúdios grandes, como a própria Industrial Light and Magic, por exemplo, ainda trabalham com refinamento quadro a quadro de
seus projetos de animação, tendo em vista o teor artístico e a liberdade de expressão da arte.
Como as sequências de etapas, por algoritmo, ajudam a criar uma
animação suave?
Veremos agora como uma dessas sequências de etapas, por algoritmo, ajuda o computador a desenhar o necessário para criar uma
animação suave. Faremos isso agora com programação.
 
Para ilustrar o algoritmo, usaremos:
� Fonte: Shutterstock | Por: MaDedee.
Mesmo não sendo totalmente familiarizado com a programação, é possível ler e entender o conteúdo.

Atenção
Lembre-se de que compreender a codificação é crucial para um designer digital, seja um webdesigner, desenvolvedor de jogos ou um artista
digital.
Para realizar nosso teste, usaremos apenas um computador e a capacidade de programas. Nosso objetivo é simples:
Animar uma bola (ou qualquer objeto) do ponto A (startX, startY) para B (endX, endY).
Se essa cena fosse passada para um estúdio que faz animação tradicional, digital ou não, o artista sênior
desenharia os quadros-chave, indicando a posição inicial e a final.
Em seguida, o projeto iria passar a estrutura para um artista júnior que desenharia quadros (key pose) entre elas
(inbetweens).
O uso do código HTML, neste caso, é bem simples: aplicação de comandos em forma da marcação que recebem atributos.
Só precisamos de uma linha para representar o objeto que será processado pelos browsers de Internet dentro das especificações padrão da
linguagem. No caso, o elemento usado, chamado canvas , faz parte do HTML5 e permite a renderização dinâmica e com script de
formas 2D e imagens de bitmap.
É um modelo procedural de baixo nível que atualiza um bitmap e não possui gráfico de cena embutido. No entanto, por meio
do webgl  , é possível criar formas e imagens em 2D, 3D e assim por diante.
Canvas
O HTML5 Canvas também ajuda na criação de jogos 2D para plataformas mobile.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
WebGL
Uma API JavaScript para renderizar gráficos 2D e 3D interativos em qualquer navegador da Web compatível sem o uso de plug-ins.
Veja a forma de escrever um Canvas usando o que chamamos de tags HTML (representados pelos símbolos ):
 HTML
 
A partir dessa parte do código e usando JavaScript, devemos colocar atributos para a tag canvas que definem a propriedade width e height
da tela para corresponder ao tamanho da tela.
 JavaScript
const canvas = document.getElementById(‘canvas’), context = canvas.getContext(‘2d’), width = canvas.width =
window.innerWidth, height = canvas.height = window.innerHeight;
A função abaixo desenha um círculo sólido verde de raio nas coordenadas x e y.
 JavaScript
function drawBall(x, y, radius) { context.beginPath(); context.fillStyle = ‘#66DA79’; context.arc(x, y, radius, 0, 2 *
Math.PI, false); context.fill();}
Todo o código descrito até aqui é a parte primária para configurar nossa animação que desenha os objetos em si. O processo da animação
começa agora:
 JavaScript
// Point Alet startX = 50, startY = 50;
// Point Blet endX = 420, endY = 380;
let x = startX, y = startY;
update();function update() { context.clearRect(0, 0, width, height); drawBall(x, y, 30);
requestAnimationFrame(update);}Primeiro de tudo, observe a função [update] sendo chamada logo acima
de sua declaração. Depois, note que requestAnimationFrame (update)
chama update repetidamente.

Atenção
A animação em flipbook é uma boa analogia para o tipo de programa que estamos escrevendo. Assim como folhear repetidamente um
flipbook cria a ilusão de movimento, chamar repetidamente a função de atualização dá a ilusão de movimento para a nossa bola verde.
Repare no código escrito que “update” é apenas um nome. A função poderia ter sido nomeada com qualquer outro.
Alguns programadores gostam dos nomes nextFrame, loop, draw ou flip porque a função é chamada repetidamente.
A parte importante é o que a função faz.
Em cada chamada subsequente da função, esperamos que ela desenhe uma imagem
ligeiramente diferente na tela do que a anterior.
Nossa implementação atual de atualização desenha a bola na mesma posição exata em cada chamada drawBall (x, y, 30). Não há
animação, mas vamos mudar isso, pois, a cada iteração de atualização, incrementamos o valor de x e y e vemos o tipo de animação que ele
cria.
 JavaScript
function update() { context.clearRect(0, 0, width, height); drawBall(x, y, 30); x++; y++; requestAnimationFrame(update);}
Cada iteração move a bola para frente nas direções x e y e as chamadas repetidas de atualização resultam na animação como mostrado.
 
Nossa intenção era mover a bola de uma posição inicial para uma posição final. Mas não estamos fazendo absolutamente nada sobre
parar a bola em uma posição final.
 
Uma solução óbvia é apenas incrementar as coordenadas quando elas são menores do que os valores endX e endY. Dessa forma, uma vez
que a bola cruze o endX, as suas coordenadas deixarão de se atualizar e a bola parará.
 JavaScript
function update() { context.clearRect(0, 0, width, height); drawBall(x, y, 30); if(x pega a fração e converte para um valor entre mín. e máx.:
Mín. = 0.
Máx. = 100.
Fração = 0,5. 
lerp
Muitas bibliotecas e línguas de shaders (programas comumente usados para produzir iluminação e sombreado) têm uma função
denominada de “lerp”, que retorna a interpolação entre dois valores (v0,v1) e um parâmetro (t) em um intervalo fechado de [0,1]:
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Quando colocamos 0,5  na fórmula do lerp, ele se traduz em 50. Este é exatamente o ponto médio entre 0 (mín.) e 100 (máx.). Ocorre da
mesma forma, se escolhermos outro valor para fração, digamos 0,85.
Se deixarmos fração = 0, o interpretador gerará 0 (mín.) e a fração = 1 e o lerp produzirá 100 (máx.).
Escolhemos 0 e 100 como mín. e máx. para manter este exemplo simples, mas o lerp funcionará para qualquer escolha arbitrária de mín. e
máx.:
Mín. = 18.
Máx. = 37.
Fração = 0,73.
Para valores de fração entre 0 e 1, o lerp permite interpolar entre mín. e máx. Isso significa percorrer entre valores mín. e máx., em que
escolher:
0 para fração coloca o valor em mínimo.
1 coloca no máximo.
Qualquer outro valor entre 0 e 1 coloca em qualquer lugar entre as variáveis mín. e máx.
Podemos pensar as variáveis mín. e máx. como quadros-chave, que correm na animação
tradicional, e as saídas do interpretador como os inbetweens.
Imaginemos agora um valor fora dos limites de 0 e 1 como fração para o lerp. Vimos que a fórmula para o lerp é extremamente direta com a
maioria das operações matemáticas básicas. Não há truques ou valores negativos aqui, apenas estendemos o controle deslizante nas duas
direções.
Seja qual for o valor da fração fornecida, o lerp produzirá um resultado lógico. No entanto, não devemos pensar muito em valores
negativos, devemos pensar é como tudo isso mapeia a animação da bola.
Vamos alterar a função de atualização para corresponder ao código a seguir, adicionando a função lerp já mencionada.
 TÍTULO
function update() { context.clearRect(0, 0, width, height); drawBall(x, y, 30); x = lerp(x, endX, 0.1); y = lerp(y, endY,
0.1); requestAnimationFrame(update);}
No código, observe que as variáveis x e y (que são inicialmente definidas como startX e startY) marcam a posição atual da bola em
qualquer quadro.
Na escolha de 0,1 como fração é arbitrária, você pode escolher o valor fracionário que quiser. Tenha em mente que sua escolha de
fração afeta a velocidade da animação.
Em cada quadro, x e endX são considerados mín. e máx. e interpolados com 0,1 como fração para obter um novo valor forx. Da mesma
forma, y e endY são usados como mín. e máx. para obter um novo valor para y usando 0,1 como fração.
A bola é então desenhada na nova coordenada (x, y) calculada. Essas etapas são repetidas até que x se torne endX e y se torne endY, caso
em que mín. = máx.
Quando mín. e máx. se tornam iguais, o lerp lança o mesmo valor exato (mín./máx.) para qualquer outro quadro, interrompendo a
animação. É assim que usamos a interpolação linear para animar uma bola suavemente.
Existem diversas maneiras de usar as tags HTML para compor junto ao Javascsript possibilidades de animação.
O que devemos destacar aqui é o projeto de jogo e sua densidade de manipulação.
 Fonte: Shutterstock | Por: bekirevren.
Animadores digitais
A maior parte da indústria da animação por computador no mundo concentra-se em animação em 3-D, favorecendo uma mistura
das técnicas de keyframing e captura de movimento como métodos padrão da indústria.
Fonte: Shutterstock | Por: Alexander Kirch.
O campo da animação por computador é interessante e estimulante, principalmente quando falamos dos tipos de carreiras. No mercado de
trabalho, serão conhecidos como animadores digitais. Os animadores de computador trabalham com estúdios de cinema e televisão,
empresas de desenvolvimento/design ou como freelancers com base em um portfólio .
portfólio
Podemos dizer que um portfólio seja uma coleção de trabalhos já realizados por um profissional ou empresa.

Saiba mais
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Visite os sites a seguir e conheça exemplos de portfolios de designers e artistas em animação:
Behance
Dribble
Como podemos observar, existe uma vasta e ampla cadeia de mercado na mídia moderna e no entretenimento, e a natureza das tarefas
disponíveis para alguém no papel de animador de computador pode variar muito.
A animação digital tem um lugar em tudo − propagandas online, filmes multimilionários, programas de televisão, noticiários − e animadores
de computador dão vida a toda imagem digital móvel que experimentamos, seja nas realidades virtuais ou nos jogos. Da modelagem de
objetos, keyframing, às animações em software especializado, cada detalhe de imagens digitais em movimentoestá nas mãos de
animadores de computador.
Fonte: Shutterstock | Por: ChameleonsEye.
Embora alguns animadores tenham sucesso sem treinamento formal ou sobrevivam de tutoriais na internet, esses indivíduos são raras
exceções e nem sempre aprendem a mostrar a técnica, mas apenas os programas. A esmagadora maioria dos animadores de computador
em atividade na indústria mundial recebeu orientação acadêmica, compreendendo que a pesquisa e a prática são muito importantes.
Em termos de carreira, os estudantes que querem uma vantagem competitiva no mercado de trabalho devem preparar um portfólio de
animações digitais para mostrar aos empregadores logo no princípio de sua carreira acadêmica.
Um portfólio robusto pode permitir que um estudante realize um estágio ou um emprego em
uma empresa que os admitirá nos próximos anos e, muitas vezes, será um fator decisivo entre
os possíveis candidatos.
javascript:void(0);
javascript:void(0);
Fonte: Shutterstock | Por: Rawpixel.com
Verificando o aprendizado
1. Durante um longo período, a animação digital se desenvolveu usando o Flash como base. Essa era acabou e hoje o software acabou
substituído pelo HTML5.
Compare as afirmativas abaixo e selecione aquela que representa o motivador principal dessa evolução.
a) O desenvolvimento em HTML5, juntamente com o Javascript e similares, constrói códigos complexos que serão processados pelos sistemas.
b) Porque não era possível criar jogos online utilizando o Flash e o futuro das animações está nos jogos.
c) Aplicações em HTML5 são fundamentais para a criação dos desenhos que comporão os quadros-chave, ajudando a criar a ilusão de
movimento.
d) Animações desenvolvidas em HTML5 são compatíveis com dispositivos mobile e internet, que representam a maior fonte de consumo digital, e
permitem criar jogos usando os browsers da internet.
2. Analise e identifique como Verdadeiras (V) ou Falsas (F) as afirmativas abaixo sobre interpolação:
I. Um programa concebido para processar dados eletronicamente, facilitando e reduzindo o tempo de execução de uma tarefa pelo usuário. 
II. Processo de geração de quadros para determinados pontos-chave de uma animação.
III. É o mais importante elemento da animação digital, pois não precisa estar declarado dentro do programa para que possa
automaticamente gerar os inbetweens.
IV. Um conjunto de componentes lógicos de um computador ou sistema de processamento de dados.
a) V – V – V - F.
b) ) F – V – F - F.
c) V – F– F - V.
d) F – V – V - F.
Considerações finais
Resumindo a importância das técnicas de animação para o cenário atual, seja observando um período específico ou a herança deixada
pelos precursores, devemos nos concentrar no valor cultural que cada uma das abordagens criativas estimula.
A riqueza em possibilidades de áreas de atuação e a infinita capacidade de se reinventar e evoluir, garantem ao profissional de animação o
estímulo necessário para se manter ativo nos estudos, usando a pesquisa e a prática como ferramentas para crescer.
Observamos a complexidade da animação digital na atualidade e concluímos que a figura tradicional do animador não é mais capaz de criar
uma animação interativa. É preciso, portanto, saber programar. 
Para entender melhor essa necessidade e saber mais sobre as vivências reais no mercado de animação, assista ao vídeo abaixo com Felipe
Gomes:Referências
CHONG, Andrew. Animação digital [recurso eletrônico]. Porto Alegre: Bookman, 2011.
 
PINTO, Marcos José. Adobe Edge Animate CC: animação e interatividade para a Web. 1. ed. São Paulo: Érica, 2014.
 
WELLS, Paul. Desenho para animação [recurso eletrônico]. Porto Alegre: Bookman, 2012.
 
WILLIAMS, Richard. Manual de Animação. São Paulo: SENAC, 2016.
QUINN, Joanna; MILLS, Les; WELLS, Paul. Desenho para animação [recurso eletrônico]
Tradução: Mariana Bandarra; revisão técnica: Sérgio Nesteriuk. Porto Alegre: Bookman, 2012.
Próxima aula
Técnicas de animação clássicas.Explore mais
Assista ao vídeo Os Doze Princípios da Animação que ilustra alguns dos princípios da animação.
Veja mais exemplos de portfólios em animação digital.
Para aprender mais sobre animação com profissionais da Pixar, faça o curso gratuito Animação Digital na Khan Academy.
Recomendamos também os filmes:
Como Treinar o Seu Dragão, DreamWorks Animation (2010).
Frozen: Uma Aventura Congelante, Walt Disney Animation Studios (2013).
Universidade Monstros, Pixar Animation Studios (2013).
Divertida Mente, Pixar Animation Studios (2015).
Zootopia, Walt Disney Animation Studios (2016).
Homem-Aranha: No Aranhaverso, Sony Pictures Entertainment (SPE), Columbia Pictures, Marvel Entertainment (2018).
Viva – A Vida É uma Festa, Pixar Animation Studios (2018).
javascript:void(0);
javascript:void(0);
javascript:void(0);da empresa de filmes Gaumont. Além de contar histórias, ele também fez alguns efeitos especiais animados para alguns
dos filmes de ação ao vivo.
Cohl foi muito inspirado pelo pioneiro da animação John Stuart Blackton, que já havia impressionado o público com os primeiros curtas
animados humorísticos, como Humorous Phases of Funny Faces (1906) e The Haunted Hotel (1907). Em 1908, Cohl fez sua estreia
animada com Fantasmagorie (1908), uma imagem em que figuras grosseiras de palitos encontram todos os tipos de objetos que se
transformam. Ele compartilhava um visual parecido com a animação de giz de Blackton, mas a principal diferença era que os
personagens de Blackton eram realmente desenhados em uma lousa e depois filmados, enquanto a animação de Cohl era desenhada em
centenas de pedaços de papel. Nesse sentido, Fantasmagorie é amplamente considerado o primeiro desenho animado genuíno e
totalmente animado. A imagem foi um sucesso com o público e, assim, pavimentou o caminho para curtas animados mais semelhantes:
Le Cauchemar du Fantoche (O Pesadelo do Boneco, 1908) e Un Drame Chez Les Fantoches (Um Teatro de Bonecos, 1908).
Seus filmes ficaram conhecidos dos Estados Unidos, por onde ficou um bom tempo. Por motivos familiares teve que retornar em 1914
para a França onde continuou seu trabalho. Um incêndio acabou por fazer com que o trabalho de Cohl fosse totalmente destruído,
sobrando apenas dois filmes. Ele não desanimou e continuou a trabalhar na empresa Éclair. Após a Primeira Guerra Mundial, Cohl deixou
a Éclair e passou suas últimas décadas pobre e quase esquecido.
Na primavera de 1937, sua barba pegou fogo quando entrou em contato com uma vela em sua mesa. Ele passou alguns meses em um
hospital enquanto o jornalista de cinema René Jeanne pagava sua conta médica, organizando uma exibição beneficente de seu trabalho.
Em 1938, Cohl faleceu, morrendo no mesmo dia em que outro lendário pioneiro do cinema francês deu seu último suspiro: Georges
Méliès (1861-1938), criador do clássico curta Le Voyage Dans La Lune (1902).
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
�Fonte: Wikimedia

Saiba mais
javascript:void(0);
� Fonte: Wikimedia
O curta-metragem Fantasmagorie segue um boneco que encontra outros personagens e transforma objetos. Na época, as caricaturas de
quadros eram populares, então os desenhos foram filmados em negativo para dar à animação a aparência de um desenho de quadro
trazido à vida. Os desenhos de Emile Cohl eram simples, sem sons ou recursos extras, pois eram feitos na própria película de filme.
Assista ao filme.
O legado de Émile Cohl mostra um processo de animação que chamamos de animação direta:
o artista anima na própria película de filme, ou suporte de exibição, podendo ser qualquer rolo
de filme ou slide. Quando ele é mostrado em sequência, ocorre a animação. Por se tratar de um
suporte muito pequeno, não costuma ter vários detalhes, pois, para desenhar no suporte, usa-
se tinta, um reagente em pincel ou até mesmo risca-se o próprio suporte. A técnica ainda é
usada em cinema experimental .
cinema experimental
Norman McLaren (1914 - 1987) foi um animador, diretor e produtor canadense escocês conhecido por seu trabalho no National Film Board
of Canada (NFB). Sua fama se deve, entre outros fatores, ao uso da animação direta em seus trabalhos.
javascript:void(0);
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
� Fonte: Wikimedia
Fonte: Shutterstock | Por: Janaka Dharmasena
Animação Clássica
As experiências de Émile Cohl com a animação direta na França talvez não se comparem com uma das figuras mais influentes para
cartunistas e animadores ao longo dos anos 1920 e além, winsor mccay (1869-1934), mais conhecido na época pela criação da tira em
quadrinhos de Little Nemo in SlumberlandWinsor McCay
O jovem sonhador Winsor McCay, assim como seu irmão Arthur, e sua irmã, Mae, frequentaram a Spring Lake Union School. Como
estudante, foi dito que Winsor rabiscava pequenas ilustrações na margem de seus livros, para desaprovação dos professores. No entanto,
uma professora de 22 anos, Hattie Capitola Schofield, reconheceu o talento de Winsor e encorajou o aspirante a artista.
Além de professora, Schofield era uma retratista. Após o naufrágio de um navio de passageiros local, Schofield permitiu que McCay
desenhasse uma ilustração do desastre em seu quadro negro da sala de aula.
Depois de deixar a Union School, o pai de Winsor McCay pressionou seu filho a buscar motivações mais realistas, mandando-o para a
Clearly Business College em Ypsilanti, Michigan. Mas Winsor continuou seus interesses, levando a uma carreira na arte. McCay passou a
criar inúmeras histórias em quadrinhos aclamadas pela crítica.
Cinco anos depois de chegar a Nova York, McCay já havia se tornado um dos principais artistas da cidade. Tanto suas histórias em
quadrinhos quanto suas performances desenhando ao vivo o levaram ao desenho animado. Mesmo não sendo a primeira pessoa a fazer
um desenho animado, ele foi o homem que definiu a indústria. A qualidade de seus desenhos não seria igual a outros nos 25 anos
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
seguintes. Seu ritmo e compreensão da mídia do desenho estavam muito à frente de seu tempo. E ele desenhou sozinho todos os 4.000
quadros do seu primeiro filme, Little Nemo (1911), enquanto ainda estava desenhando suas três tiras e realizando seus atos de vaudeville.
O filme Little Nemo foi lançado para o teatro e usado em seu ato, assim como seu segundo, How, a Mosquito Operates (1912), com 6.000
desenhos. Quando esses filmes foram lançados em uma distribuição mais ampla, a fama de McCay se espalhou, especialmente para a
comunidade de animação ainda incipiente. Contudo, a grande criação de McCay foi o filme de animação Gertie the Dinosaur (fevereiro de
1914). McCay projetou o filme em seu bloco de desenho branco e em uma sequência cuidadosamente coreografada criou um ato teatral
onde ele mesmo interagia com o dinossauro animado. Uma abertura filmada foi anexada à animação para distribuição teatral.
Publicado pela primeira vez
em 15 de outubro de 1905,
a tira semanal de Little
Nemo seguiu as aventuras
de um menino chamado
Nemo cujos sonhos
noturnos fantásticos eram
detalhados através dos
painéis cômicos.
 
Suas visões extravagantes
não se limitavam a nenhum
tempo ou lugar em
particular e muitas vezes
não se baseavam na
realidade.
 
A história em quadrinhos
mostrou o domínio de
profundidade narrativa,
campo de ação,
perspectiva, composição,
uso da cor e a capacidade
de contar histórias de
McCay.
Usando uma página
colorida de 16 x 21
polegadas da edição de
domingo do The New York
Herald, McCay
experimentou o uso
engenhoso da página do
jornal por meio de painéis
de tamanhos variados e
criativos, que foram
alterados para adaptar cada
história. A faixa foi
publicada entre 1905 e
1914 e foi seguida por um
renascimento de curta
duração em meados da
década de 1920.
Contudo, a grande criação de McCay foi o filme de animação Gertie the Dinosaur (fevereiro de 1914). Embora primitivo pelos padrões de
hoje, o filme apresentou muitas técnicas posteriormente adaptadas por outros animadores da indústria tradicional. McCay projetou o filme
em seu bloco de desenho branco e em uma sequência cuidadosamente coreografada criou um ato teatral onde ele mesmo interagia com o
dinossauro animado. Uma abertura filmada foi anexada à animação para distribuição teatral.
 
� Fonte: Wikimedia. � Descrição / Fonte
alternativa (Fonte:
Wikimedia).
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online

Saiba mais
javascript:void(0);
javascript:void(0);
Assista a um pequeno trecho recuperado do filme.
Na animação clássica, todos os quadros são desenhados, assim como na animação direta, mas fotografados em um enquadramento
ordenado porum gabarito.
O grande problema da animação clássica é a quantidade excessiva de desenhos a se fazer, algo que Winsor McCay tinha como um
verdadeiro prazer, entendendo isso como arte e não como negócio. A animação clássica demorava tempo para ser executada que logo foi
superada pela revolução tecnológica da emergente indústria da animação que se iniciava em Nova Iorque naquela mesma década.
Esta marca d'água se aplica a fundos claros
� Fonte: Shutterstock | Por: shadow216
Superada
Não se trata de uma técnica esquecida, pois, na verdade, pode-se dizer que virou uma vertente artística. Animadores como Bill Plympton
ficaram muito conhecidos por realizar animações para a MTV usando justamente filmes feitos com a animação clássica.
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Animação Tradicional
Os irmãos fleischer foram determinantes para a criação da indústria da animação. Eles completaram seu primeiro filme de desenho
animado em 1915. Max inclinou-se mecanicamente para inventar o rotoscópio, um dispositivo de economia de tempo e mão de obra, no
qual imagens eram rastreadas como um guia para ação animada.
Irmãos Fleischer
Os irmãos Fleischer eram filhos de um alfaiate austríaco que levou sua família para a América em 1887.
 Fonte: Shutterstock | Por: AlexanderZe

Saiba mais
Out of the Inkwell
A performance na câmera do irmão Dave em um traje de palhaço foi rotoscopada para o personagem Ko-Ko the Clown, que estrelou a série
entre 1919-1929, produzida e distribuída pelo Estúdio Bray em Nova York.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
out of the inkwell 
A premissa básica para a série é um live-action de Max Fleischer mergulhando uma caneta em um frasco de tinta e desenhando Ko-Ko, que
interage − e muitas vezes interrompe − o mundo real.
Assista ao vídeo.
� Fonte: Wikimedia
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
javascript:void(0);
javascript:void(0);
Walt Disney acabou aprimorando e avançando a técnica de Max Fleischer de juntar personagens de ação ao vivo com desenhos
animados/personagens desenhados. Isso resultou em Alice Comedies, que acabaria se tornando Alice no País das Maravilhas, mas em um
formato de série. Continuando com Alice Comedies em 1928, Walt Disney projetou e criou o primeiro desenho animado que sincronizou
completamente imagens em movimento e sons, o qual mais tarde ele chamou de steamboat willie .
Steamboat Willie
Nesse desenho animado foi a primeira vez em que Walt Disney usou Mickey e Minnie em uma animação da Disney.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Enquanto os irmãos Fleischer introduziam temas adultos com seus personagens nos cinemas, durante as décadas de 1930 e 1970, mais
empresas começaram a expandir a criação de animações 2D, voltadas para o público infantil. Os três mais notáveis durante esse período
foram:
Walt Disney criou inúmeros filmes de longa metragem durante esse período, junto com personagens mais originais, como o Pato
Donald e o Pateta.
A Warner Brothers criou o looney tunes , que foi acompanhado por seus próprios personagens únicos, como Bugs Bunny, Daffy
Duck e Porky Pig.
hanna-barbera também começou a produzir desenhos especialmente para a televisão e considera-se que "domina" a televisão
animada americana há mais de três décadas. Alguns exemplos de seus trabalhos são Os Flintstones, Yogi Bear, Os Smurfs, Scooby Doo
e Jonny Quest.
Looney Tunes
Looney Tunes foi uma série de desenhos animados feitos especialmente para a televisão. Após a introdução da televisão em cores, as
animações começaram a ser transmitidas exclusivamente em cores.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Hanna-Barbera
Além de desenhos animados para a televisão, eles também produziram vários filmes teatrais, especiais e comerciais.
Verificando o aprendizado
1. Identifique a alternativa que melhor descreve o papel do rotoscópio na evolução da animação:
a) O rotoscópio substituía as folhas de papel e representava uma economia de recursos.
b) Com venda do instrumento, seus inventores lucraram e usaram esses recursos para montar um grande estúdio de animação.
c) O rastreio das imagens reais facilitava a reprodução dos movimentos da animação, agilizando a produção.
d) Os estúdios usaram o rotoscópio para substituir a mão de obra dos animadores, sobrando mais recursos para a produção de novas
animações.
2. Identifique a principal mudança nas tendências de criação das animações responsável pela expansão do gênero:
a) Os estúdios de animação passaram a abordar temas voltados para o público infantil.
b) As animações 2D passaram a ser criadas com foco no cinema.
c) As animações 2D com temas voltados para o público adulto representaram uma evolução do gênero à época.
d) Produzindo exclusivamente animações para a TV que incluíam som sincronizado.
MÓDULO2
 Examinar as técnicas da animação modernas e contemporâneas.
Stop motion
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Humpty Dumpty Circus - Schoenhut Company Museu de História da Filadélfia. | Fonte: Wikimedia
O stop motion nada mais é do que a ilusão de movimento com o uso de fotografias tiradas quadro a quadro. Os primeiros exercícios em
animação fatalmente foram técnicas rudimentares do stop motion se considerarmos que eram fotogramas pintados em vidro e ilustrações
feitas em um quadro negro.
O primeiro documentário de animação em stop motion é creditado a J. Stuart Blackton (1875-1941) e Albert E. Smith (1875-1958) pelo filme
The Humpty Dumpty Circus, em Vitagraph, lançado em 1898.
Há muita especulação sobre quando a técnica foi descoberta, mas pelo menos sabemos que o primeiro lançamento comercial do stop
motion como técnica foi com esse filme, no qual era mostrado o dia e a vida em um circo de brinquedos.
O filme foi usado com os brinquedos de um dos produtores e foi perdido, sobrando apenas uma imagem. Na técnica, cada brinquedo era
movimentado e fotografado, gerando a animação. J. Stuart Blackton ficou conhecido logo depois com seu filme the humorous phases of
funny faces , citado como um dos precursores da animação. Ele fundou um estúdio de animação juntamente com um mágico e um
ilusionista.
Em 1907, um filme chamado The Haunted Hotel, produzido pelo mesmo J. Stuart Blackton, tornou-se um grande sucesso. O filme
representava móveis e objetos animados e demonstrou a técnica básica de animação em stop motion na sua melhor qualidade.
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Humorous Phases of Funny Faces, by J. Stuart Blackton,1906. | Fonte: Wikimedia
The Humorous Phases of Funny Faces
No desenho animado, cenas desenhadas à mão animadas aparecem em um quadro-negro, como um palhaço brincando com um chapéu e
um cachorro pulando em um arco. No começo, porém, as mãos do cartunista também estão incluídas, enquanto ele desenha as primeiras
linhas no quadro-negro. A partir daí, a técnica de stop motion é usada para mostrar o que parece ser um desenho completo − e depois se
movendo − sem que apareça o artista na tela.
Assista ao filme.

Saiba mais
javascript:void(0);
javascript:void(0);
Assista ao filme The Haunted Hotel.
�Wladyslaw Starewicz | Fonte: Wikimedia
Wladyslaw Starewicz (1882-1965)
Um gênio quando se tratava de desenvolver uma narrativa em stop motion. Ele produziu muitos filmes, mas um que merece destaque é seu
primeiro curta-metragem narrativo intitulado Lucanus Cervus, que foi feito em 1910 e usava insetos como fantoches.
Ele passou a criar mundos mágicos cheios de bonecos de stop motion eé creditado como diretor de muitos grandes filmes animados,
inspirando a fantasia que se veria décadas depois dentro de filmes com essa técnica. Dentre seus clássicos, podemos destacar O Conto da
Raposa, juntamente com O Mascote, que são considerados obras clássicas desse mestre do Stop Motion.
Com o cinema, as técnicas de trucagem e a narrativa de fantasia de George Meliés (1861-1938) inspiraram a indústria a desafiar as
películas cinematográficas com novas histórias, usando novas tecnologias da época. Um dos animadores mais famosos dessa década é o
lendário Willis O’Brien (1886-1962). Seu trabalho no filme O Mundo Perdido (1925) foi um divisor de águas para o seu tempo. Mais tarde
produziu a animação para uma das maiores produções cinematográficas do mundo: o filme King Kong, de 1933.
Isso o levou ao estrelato e influenciou massivamente gerações de animadores em todo o mundo.
javascript:void(0);
javascript:void(0);
King Kong Fay Wray 1933 | Fonte: Wikimedia
Mesmo antes do lançamento de Branca de Neve e os Sete Anões, de Walt Disney, a animação já conhecia seu encanto no cinema com o stop
motion. O´Brien foi um dos primeiros animadores a usar mecatrônica em seus modelos animados, bem como as técnicas de temporizador
e marcadores de posição dos bonecos. Um de seus primeiros fãs e alunos, que procurou O’Brien para desenvolver sua técnica e foi
orientado por ele, é o mais famoso animador de todos os tempos, ray harryhausen (1920-2013). Não só Harryhausen é famoso no
mundo da animação como também em todas as outras formas de animação existentes a partir de então.
Quando Willis O'Brien convidou Ray para se juntar a ele na animação da versão de 1949 do filme Mighty Joe Young, isso permitiu que o
jovem Harryhausen desenvolvesse sua habilidade e alcance como animador mestre. Ele produziria efeitos visuais para muitos filmes. Uma
enorme quantidade de filmes de aventura, como:
Ray Harryhausen
Ray Harryhausen foi durante muitos anos o único animador que trabalhou duro em sua garagem, dando vida a dinossauros, construindo
fantoches e explorando basicamente o meio e suas técnicas. Usando apenas sua demo curta de animação, ele conseguiu uma posição
como animador no show Puppetoons de George Pal (1908-1980). Ele também foi capaz de convidar o próprio Willis O'Brien para trabalhar no
programa, no qual O´Brien só ficou por um curto período.
�Fonte: Animation Magazine
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
A besta de 20.000 braças (1953)
O monstro do mar revolto (1955)
A 20 milhões de milhas da Terra (1957)
Mesmo conquistando a posição de animador no show Puppetoons, de george pal , atração muito famosa nos Estados Unidos, sua
maestria no stop motion só foi percebida com seu trabalho nos seguintes filmes:
George Pal
George Pal, citado anteriormente como empregador de Harryhausen, teve também sua contribuição em forma de arte e técnica para o stop
motion, já que seu método substituto de animação, no qual os elementos a se animar eram substituídos por outros (como rostos, braços e
pernas de personagens), foi e ainda é uma grande influência nas técnicas atuais de criação de filmes em stop motion.
Os Puppetoons foram produzidos entre os anos 1930 e 1940 como uma série. Seu estilo e energia foram além de seu tempo e ganharam
vários prêmios da Academia.
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Fonte: Shutterstock | Por: AlexanderZe
Esses filmes são considerados alguns dos melhores trabalhos animados em stop motion do
mundo até hoje. Na maioria dos casos, a totalidade dos efeitos visuais que são apresentados
nos filmes foram animados sozinhos por Harryhausen.

Saiba mais
Devemos perceber também que a maior parte das animações stop motion feitas no mundo não foram produzidas nos EUA. Na verdade, a
animação de fantoches estava muito viva e prosperando na Europa Oriental na época. Um dos animadores/diretores mais famosos da
época foi o tcheco Jiri Trnka (1912-1969). Ele foi criado sozinho na Europa Oriental como o inventor do sistema de soquetes e bolas da
armadura de objetos animados em stop motion, algo que revolucionou a animação.
�Fonte: Medium.
javascript:void(0);
�Fonte: Medium.
Jiri Trnka é frequentemente chamado de Walt Disney da Europa Oriental, já que seu estúdio, a Trnka Studios, produziu muitos filmes curtos
e longas-metragens que se tornaram um grande sucesso em todo o mundo. Os filmes de destaque são: O imperador e o rouxinol (1949),
Sonho de uma noite de verão (1959) e A mão (1965). Sua estética tocante e narrativas com forte apelo emocional traziam a seus filmes o
realismo de emoções.
A popularização da televisão foi uma grande influência nas produções de stop motion, já que os programas de TV precisavam ser
produzidos rapidamente e com orçamento muito pequeno.
Na década de 1970, o stop motion atingia o pico da febre por ser uma das técnicas de efeitos visuais mais utilizadas em
todas as mídias, além de ser um meio para comerciais com apego e fixação de marca.
Nos anos 1980, o stop motion atingiu o seu apogeu com longas-metragens, séries animadas de televisão, comerciais
altamente marcados para grandes marcas e o mais novo dos meios de comunicação, os videoclipes.
Em 1955, o Gumby Show foi produzido e animado por art clokey (1921-2010) e se tornou um enorme sucesso. Com o
personagem principal de animação de argila verde, Gumby, o show durou muitos anos e foi a porta de entrada para muitas
carreiras em animação stop motion para artistas da indústria.  
Art Clokey
Art Clokey foi ainda uma segunda série de televisão chamada Davey e Goliath. Essa animação de domingo de manhã também foi uma
enorme influência em muitas gerações de crianças que queriam manipular marionetes e algum dia serem animadoras.
�
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
Os anos 1980 foram verdadeiramente uma era de ouro para o stop motion em todo o mundo. A quantidade de animação produzida durante
esse tempo é até complexa de se mapear.
As redes de televisão a cabo, como a MTV, contrataram artistas para fazer com que a comunicação visual de suas vinhetas fosse toda em
stop motion e vídeos de música para artistas como Peter Gabriel foram completamente produzidos com a técnica. Logo, parecia que argila
e animação de fantoches estavam por toda parte.
�Fonte: Freepik.
Fonte: Internet Movie Database.
Will Vinton (1947-2018), que ganhou um Oscar por Closed Mondays, abriu um estúdio de animação em Portland, Oregon, que produziu
alguns dos personagens mais icônicos até hoje. O Noid e o The California Raisins foram dois grandes personagens comerciais de barro que
depois se tornaram maiores do que as marcas que estavam tentando promover.
Filmes como Star Wars, O império contra-ataca, Dragonslayer e RoboCop seriam preenchidos com efeitos visuais de stop motion ao ponto de
as linhas entre a realidade e o imaginário se misturarem, graças ao trabalho de grandes profissionais, como Phil Tippett.
javascript:void(0);
Fonte: Internet Movie Database.
No início dos anos 1990, o stop motion começou a decair. Com o crescimento dos computadores pessoais e o avanço da tecnologia digital,
a animação artesanal foi rapidamente desaparecendo como o meio preferido de escolha para comerciais, VFX e filmes.
Mesmo assim, diversos animadores ainda ganhavam notoriedade como:
Tim Burton
Nightmare Before Christmas
javascript:void(0);
Nick Park e Peter Lord
Chicken Run e Wallace e Grommit
Por causa do avanço dos computadores e da velocidade com que eles poderiam produzir imagens, o stop motion teve que se adequar aos
bytes de computador. Essa fusão gerou interessantes filmes, trazendo uma estética nova, rica e cheia de novas técnicas.
Usando sistemas de fusão de imagens e efeitos chroma, temos:
Coraline
Noiva Cadáver
Fantastic Mr. Fox
ParaNorman
Frankenweenie
The Boxtrolls

Saiba mais
Já filmes comoLego Movie são muito mais CGI do que animação analógica, embora se baseiem no conceito em algumas cenas.
Outros
Podemos citar dois tipos de animação que derivaram de outras; essas, já utilizadas como experiências estéticas e cinema de arte,
constroem outros contextos que foram utilizados em muitas obras audiovisuais e que também, de alguma forma, ajudaram a construir
elementos da animação que são usados no computador:
Clique nos botões para ver as informações.
Animação por recortes 
�Fonte: johnnykel.ly
Usada desde o século XIX nas animações pré-tradicionais, os recortes simplesmente são pedaços estáticos de um conjunto maior de um
elemento animado, como pessoas, animais ou máquinas. É uma espécie de trucagem de elementos de um fotograma por meio de
pequenas colagens. Algumas dessas peças são conectadas por alfinetes e cordões, podendo ser animadas em tempo real, dando maior
realismo. É conhecida também como Cut-out animation nos cursos de animação do mundo todo.
Pintura sobre vidro 
javascript:void(0);
Um grande exemplo dessa técnica, e ainda para dizer que atualmente é um tipo de stop motion com muita riqueza estética, é o filme
The Old Man and The Sea de Alexander Petrov. Na película, é usada toda a maestria dessa técnica, simulando pessoas, o mar e
tempestades.
�Fonte: martinechartrand.net
Talvez seja a mais complexa de todas as anteriores. Foi criada a partir de uma técnica mais econômica elaborada por J. Stuart Blackton
com suas imagens em quadro negro. O princípio da pintura sobre vidro é usar algum material (tinta, areia, líquidos) em um suporte (vidro,
madeira, metal) e ir fazendo cada desenho modificando o anterior. Geralmente, essa técnica usa o formato mesa de vidro para iluminar.
Utilizou-se óleo nas primeiras experiências, depois foram inseridos pigmentos, onde a tinta nunca pode secar, o que dificulta ainda mais a
técnica. É permitido borrar os elementos do fotograma próximo, mas nunca apagar o desenho por completo.
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Técnicas Avançadas
javascript:void(0);
javascript:void(0);
�Fonte: Shutterstock | Por: delcarmat; Crystal Eye Studio; Daria Diomidova.
No mundo real, as leis básicas da Física foram descritas pela primeira vez por Isaac Newton e Albert Einstein. No mundo da animação,
porém, devemos as leis aos animadores da Disney.
Personalidades
Esta marca d'água se aplica a fundos escuros
� The Nine Old Men: Lessons, Techniques, and Inspiration from Disney's Great Animators, 2015 – Boca raton, FL. Fonte: Amazon
Conhecidos como Nine Old Men (Os nove anciões ) da Disney, eram os principais animadores (alguns dos quais mais tarde se tornaram
diretores) da Walt Disney Productions, que criaram algumas das obras mais famosas da Disney, de Branca de Neve e os Sete Anões a
Bernardo e Bianca.
Trabalhando para a Walt Disney Company em seu auge, na década de 1930, os Nove Anciões criaram os 12 princípios básicos de
animação, cada um dos quais pode ser usado para produzir a ilusão de personagens se movendo realisticamente em um desenho
animado.
Nove Anciões
Walt Disney, em tom de brincadeira, chamou esse grupo de animadores de "Nove Anciões", referindo-se à descrição desdenhosa de Franklin
D. Roosevelt dos nove juízes da Suprema Corte dos Estados Unidos, embora os animadores tivessem entre trinta e quarenta anos na época.
Todos os membros do grupo já faleceram.
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
São inúmeras lições que trouxeram o refino na animação, mas, segundo os Nove:
O objetivo da animação não é realismo, mas a ilusão do realismo.
Por exemplo:
Rotoscopia
Esta marca d'água se aplica a fundos escuros
O objetivo não é fazer com que os objetos se movam tão realisticamente quanto possível, mas
sim movê-los o mais fluidamente possível, independentemente do realismo. Boa animação
requer leis da física totalmente diferentes.
Mas quem foram esses formidáveis animadores e quais foram as suas
contribuições para o avanço técnico da animação?
Fonte: Shutterstock | Por: Petr Vaclavek; ONYXprj.
Clique nos botões para ver as informações.
Juntou-se à Disney em 1927. Sua especialidade era animar Mickey Mouse, pois ele era o único dos Nove Anciões a trabalhar nesse
personagem desde suas origens com Ub Iwerks. Les fez muitas cenas ao longo dos anos, animando até A Dama e o Vagabundo. Ele
passou a dirigir e fez muitos curtas animados.
Les Clark (1907-1979) 
Juntou-se em 1933. Um dos melhores animadores da Disney, ele animava personagens notáveis como Peg em A Dama e o
Vagabundo; os abutres em O Livro da Selva; O voo de Peter Pan sobre Londres para Neverland; e Br'er Rabbit, Br'er Fox e Br'er Bear (em
A Canção do Sul). Por causa do seu comportamento e da sua capacidade de treinar novos talentos, Larson recebeu a tarefa de
identificar e treinar novos animadores na Disney na década de 1970. Muitos dos maiores talentos da Disney foram treinados por Eric
nos anos 1970 e 1980.
Eric Larson (1905-1988) 
Começou em 1934 trabalhando em Branca de Neve. Seu trabalho incluiu vilões como Shere Khan (em O Livro da Selva), Edgar, o
mordomo (em Aristogatas), o xerife de Nottingham (em Robin Hood) e Madame Medusa (em Bernardo e Bianca).
Milt Kahl (1909-1987) 
Juntou-se à Disney em 1934. Seu trabalho inclui Grilo Falante, Lúcifer, Jaq e Gus (em Cinderela) e o Chapeleiro Maluco e o Gato de
Cheshire (em Alice no País das Maravilhas). Seu trabalho era frequentemente mais selvagem do que os dos outros animadores da
Disney e era único.
Ward Kimball (1914-2002) 
Juntou-se à Disney em 1934. Passou a escrever sobre as técnicas de animação com os livros A Bíblia do Animador e The Illusion of Life
com Ollie Johnston. Seu trabalho incluía a Malvada Madrasta (em Cinderela), a Rainha de Copas (em Alice no País das Maravilhas) e o
Capitão Gancho (em Peter Pan).
Frank Thomas (1912-2004) 
Começou em 1935, em Branca de Neve, e mais tarde passou a desenvolver/animar os personagens de Bambi e Thumper (em Bambi),
Aurora, Malévola e Diablo, o corvo (em A Bela Adormecida), e Cruella De Vil (em 101 Dálmatas). Davis foi responsável pelo design de
personagens para as atrações Piratas do Caribe e Mansão Assombrada na Disneylândia.
Marc Davis (1913-2000) 
Entrou para a Disney em 1935, trabalhou pela primeira vez em Branca de Neve. Foi autor da bíblia do animador The Illusion of Life com
Frank Thomas. Seu trabalho inclui o Sr. Smee (em Peter Pan), as Stepsisters (em Cinderela), o Procurador Distrital (em As Aventuras de
Ichabod e Mr. Toad) e o Príncipe John (em Robin Hood). De acordo com o livro The Disney Villain, escrito por Johnston e Frank Thomas,
Johnston também fez parceria com Thomas na criação de personagens como Ichabod Crane (em As Aventuras de Ichabod e Mr. Toad)
e Sir Hiss (em Robin Hood);
Ollie Johnston (1912-2008) 
Começou em 1935, trabalhando com Norm “Fergie” Ferguson (criador do Pluto) e rapidamente se tornou membro dos Nove.
Lounsbery, carinhosamente conhecido como "Louns" por seus companheiros animadores, foi um desenhista incrivelmente forte que
inspirou muitos ao longo dos anos. Sua animação foi notada por sua sensação elástica e plástica. Lounsbery animou Ben Ali Gator em
Dança das Horas, do filme Fantasia; George Darling em Peter Pan; Tony, Joe e alguns dos cachorros de A Dama e o Vagabundo; os reis
em Bela Adormecida; os elefantes no Livro da Selva; e muitos, muitos outros. Na década de 1970, Louns foi promovido a diretor e
codirigiu O Ursinho Puff e seu último filme, Bernardo e Bianca;
John Lounsbery (1911-1976) 
Juntou-se à Disney em 1935 como animador e diretor. Ele dirigiu todos os filmes animados da Disney depois da morte de Walt até sua
aposentadoria. Alguns de seus trabalhos incluem o crocodilo (em Peter Pan), o Dragão (em Bela Adormecida) e o rato (em A Dama e o
Vagabundo);
Wolfgang Reitherman (1909-1985) 
Graças aos esforços dos grandes animadores do passado, podemoscompreender os princípios da animação em 12 importantes pontos.
Veja que não é necessário que todos os doze princípios estejam presentes para se ter uma animação, até porque uma animação consegue
ser compreendida sem a inclusão deles, principalmente se sua estética é minimalista e tem poucos quadros.
Contudo, é importantíssimo ter o conhecimento dessas técnicas avançadas para explorar novas possibilidades.

Atenção
Consumidores gostam de experiências com maior fluidez e qualidade.
Os 12 princípios da animação
Esta marca d'água se aplica a fundos escuros
Clique nos botões para ver as informações.
O princípio da massa, também é conhecido mundialmente como esmagar e esticar (ou no inglês squash & stretch), é um dos
primeiros e mais importantes princípios da animação utilizados como técnica para dar mais realismo aos movimentos dos desenhos
animados. O objetivo dessa técnica é dar aos personagens animados e objetos orgânicos a sensação de peso e gravidade,
distorcendo sua massa e dando mais flexibilidade.
Então, quando deformamos um objeto, ele precisa ficar mais fino e comprido, e esmagamos o mesmo, ele precisa ficar mais largo e
espalhado. Se não for feito isso, vai parecer que os objetos perdem massa e volume, dando a impressão que encolheram ou
cresceram. Ao usar essa técnica, é importante manter o volume do objeto sempre o mesmo, isto significa que tem que ter a mesma
massa. Mais uma vez, recomendamos que a observação seja o principal elemento de composição dessas animações.
1 – Esmagar e Esticar 
Uma maneira bem interessante de observar esse comportamento é
estudar como uma bola de borracha pode reagir quando é atirada ao ar
e começa a ganhar velocidade: a bola se estica quando ela sobe e
desce e esmaga quando atinge o solo.
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Antecipação é uma técnica também muito antiga da animação que ajuda a preparar o espectador para ações que estão prestes a
acontecer em uma cena. Quando aplicada, esta técnica tem o efeito de fazer com que um movimento tenha maior realismo para o
observador.
Imagine um caso onde vamos realizar um pulo em um jogo ou na vida real. Nesse movimento, é impossível pular sem dobrar os
joelhos – isso significa que, para certos movimentos de ação, outros movimentos devem ser realizados antes. Da mesma forma,
animar movimentos sem ações de antecipação terá uma percepção completamente estranha para quem os vê.
2 – Antecipação 
� Fonte: Shutterstock | Por: VectorArtFactory
3 – Encenação 
Tem uma relação direta com os estudos visuais de uma composição que encontramos em obras de arte que precisam se expressar por si
mesmas. Deve-se usar, por exemplo, regras de composição e estética como o movimento para guiar o olhar do observador e chamar a
atenção para o que é realmente importante em uma cena.
Muitos tipos estéticos visuais, como os Mangás e os Animes japoneses usam com muita frequência a técnica da encenação para
apresentar diversos estados dos personagens de uma cena. Esse elemento é tão presente (como estalos, linhas, riscos e símbolos) que
passou a ser forma da linguagem de comunicação dessa mídia, além de diminuir a quantidade de animações feitas, passando o mesmo
sentimento.
�Fonte: Shutterstock | Por: Rolling Stones.
Para essa técnica, tomamos como base que existem duas maneiras de lidar com a animação de um desenho, jogo ou filme: sempre
para a frente e pose a pose. Essas duas técnicas são frequentemente usadas em conjunto para dar um efeito melhor à animação. A
ação direta envolve o desenho quadro a quadro do início ao fim, com o animador tendo que desenhar sempre de forma contínua,
evitando paradas bruscas ou cortes de fluidez (perceba que isso é muito comum nas animações da Disney).
Usando o efeito pose a pose como técnica, o animador desenha um quadro inicial, um quadro final e alguns quadros-chave no meio
(chamados de inbetweens). Para ter controle da fluidez da animação, mais poses são desenhadas nos meios das outras,
segmentando, assim, quantas vezes forem necessárias até se obter o resultado desejado.
4 – Animação direta ou pose a pose 
� Fonte: Shutterstock | Por: lisalinart
Se percebermos bem a dinâmica das coisas (como carros, pessoas etc.), veremos que, quando uma determinada coisa que está em
movimento e para bruscamente, seus outros objetos continuam a se movimentar e depois param. Da mesma forma, nem tudo em um
conjunto de coisas se moverá na mesma proporção e velocidade, devido a massas diferentes. Isso forma a essência do overlapping.
5 – Overlapping 
No caso de um personagem correndo, seus braços e pernas podem estar se movendo a uma taxa diferente em relação à cabeça dele.
Esta é uma ação sobreposta que deve ser calculada antes de desenhar. Da mesma forma, quando o personagem para de correr, o seu
cabelo provavelmente continuará a se mover por alguns quadros antes de parar.
�Fonte: D´Source.
A melhor forma de compreender o princípio da aceleração e desaceleração é pensar na dinâmica de um carro e seu deslocamento. Ao
se ligar o carro, ele começa a se movimentar e depois vai, em algum momento, parar. Ao acelerarmos o carro, ele vai se mover
lentamente antes de ganhar velocidade. O inverso acontecerá quando o carro começa a frear. Na animação, nada é instantâneo e
brusco e esse efeito especial é obtido adicionando mais quadros no início e no final de uma sequência de cena. Os programas de
animação muitas vezes criam automaticamente esses efeitos.
6 – Aceleração e desaceleração 
Ao trabalhar em animação, é sempre bom seguir as leis da Física. A maioria dos objetos, quando se movimentam, seguem um
desenho de arco ou uma espécie de caminho, e suas animações devem refletir esse arco.
Já parou para pensar que a maioria dos objetos segue um arco ou um caminho quando eles estão se movendo?
7 – Movimento em arcos 
Logo, suas animações devem refletir esse arco. Vemos isso quando colocamos imagens estroboscópicas (sobrepostas a cada
segundo) uma em cima da outra.
Fazendo o mesmo experimento de Eadweard Muybridge (1830-1904), percebemos exatamente os arcos acontecendo.
Ao posicionar quadros-chave, deve-se, então, desenhar as linhas dos arcos. No corpo humano, todos os movimentos são baseados
em arcos.

Exemplo
Quando arremessamos uma bola de baseball no ar, ela segue um arco natural à medida que os efeitos da gravidade da Terra atuam sobre
ela, até cair no chão. A observação dos acontecimentos ao nosso redor é essencial, e sensibilidade também.
Veja os exemplos a seguir e procure observar em você mesmo nas pessoas esses movimentos:
O arco da ação nos dá um fluxo contínuo. No movimento desse braço, o pulso é quem conduz o arco e a mão acompanha.
Os ossos também não encolhem nem esticam, eles mantêm seu comprimento e massa.
Juntamente com outros princípios da animação, podemos concluir que jamais devemos fazer as interpolações usando apenas retas.
Na construção da animação, os arcos existem e nos ajudam a girar objetos, juntas, movimentar na gravidade, além de vários outros
efeitos.
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Ações secundárias são usadas para dar apoio ou ênfase para a ação principal que ocorre em uma determinada cena da animação. É
um princípio simples, mas certamente dará mais riqueza para uma animação.
Por exemplo, o movimento sutil do cabelo de um personagem enquanto ele caminha, ou talvez uma expressão facial ou um objeto
secundário reagindo ao primeiro quando ambos colidem são bons casos de ação secundária. Seja qual for o caso, esta ação não deve
jamais desviar a atenção da primária.
8 – Ação secundária 
� Observe o movimento sutil das orelhas do coelho durante o pulo. | Fonte: Shutterstock | Por: Maquiladora.
Neste princípio da animação, é preciso olhar para as leis da Física novamente e aplicar o que vemos no mundo natural às nossas
animações. O foco está no tempo.
9 – Temporização 
Se movermos um objeto mais rápido ou maisdevagar do que se moveria no mundo real, os observadores perceberão que é irreal.
Usar o timing correto permite controlar quando determinados objetos estão subindo ou descendo, o que garante o realismo de um
overlapping, por exemplo. Seja sutil e observador!  
Dica
Pode-se usar keyframes móveis nos programas de animação para controlar isso.
10 – Exagero 
De acordo com o princípio anterior, realismo é essencial em uma animação, mas nem tanto. A explicação é simples:
A técnica induz a criar, por exemplo, animações onde esticar e achatar são um pouco mais amplas do que na vida real. Mais uma vez,
questões de estética podem quebrar esse princípio.
� Fonte: Shutterstock | Por: Memo Angeles.
Em uma animação, não estamos vendo uma cena real, portanto, deve existir uma certa ludicidade na ilusão do movimento.
Devemos, então, adicionar um pouco de exagero aos personagens e objetos para torná-los mais dinâmicos.
O gato ao lado é um exemplo disso. Observe os traços menos realistas do desenho, assim como a expressão no olhar, mais humana.
Pode-se parecer óbvio e frustrante ao mesmo tempo para alguns estudantes, mas um animador precisa entender o básico da
representação de um desenho. Isso inclui saber minimamente desenhar o espaço tridimensional e compreender forma e anatomia,
peso e volume, luzes e sombras.
11 – Volumetria 

Atenção
Embora também se possa impor limites ao mundo que criamos nas mídias digitais, é importante permanecer consistente.
Por exemplo, se o mundo ao nosso redor tem uma perspectiva visual de um quarto onde as portas nunca aparecem em paralelo e existe
um ponto de fuga que distorce o nosso olhar, ou talvez os prédios possuam uma arquitetura estilizada, deve-se manter essa perspectiva
durante toda a animação. Caso contrário, as coisas vão se tornar fora de uma realidade compreensível.
� Fonte: Shutterstock | Por: Valeri Hadeev
Nas mídias digitais, os objetos e o mundo em que vivem os personagens e elementos da animação precisam de alguma maneira
atrair o espectador.
Não há nenhuma técnica para ser usada neste princípio, mas tudo começa com um forte desenvolvimento do personagem e a
capacidade de contar sua história por meio da arte da animação.
12 – Apelo 
Isso inclui ter um design fácil de ler, formas sólidas e uma representação visual de
personagens cujas personalidades sejam rápidas de se deduzir.
Chamado de appeal pelos animadores americanos, é o princípio que dá uma identidade ao animador. Existem disciplinas na área da
arte e percepção que ajudam na construção de personagens. Esses estudos levam em consideração fatores subjetivos e objetivos,
que vão desde a roupa e cor do personagem, ao seu peso e formato para que consiga obter uma animação com expressão e leitura
adequadas.
� Fonte: Shutterstock | Por: Nearbirds.
Verificando o aprendizado
1. O stop motion teve sua influência ampliada com a evolução da tecnologia e a popularização da televisão e dos computadores pessoais.
Com base nessa informação e em seus conhecimentos sobre o tema, analise e identifique como Verdadeiras (V) ou Falsas (F) as
afirmativas abaixo sobre o stop motion:
I. A popularidade do stop motion se deveu à necessidade de agilidade na produção dos programas de TV e seus orçamentos limitados.
II. Os videoclipes foram grandes consumidores do stop motion.
III. Grandes marcas também consumiam o stop motion, criando campanhas altamente atraentes.
IV. Com o avanço dos computadores e da velocidade com que eles poderiam produzir imagens, o stop motion foi extinto.
a) V – V – V - F.
b) F – V – V - F.
c) V – F– F - V.
d) F – V – V - F.
2. Com base nos princípios da animação, selecione a afirmativa correta:
a) O objetivo é fazer com que os objetos se movam o mais fluidamente possível, independentemente do realismo.
b) É importante realizar alterações no tamanho e na massa dos objetos conforme ele se movimenta.
c) O objetivo é fazer com que os objetos se movam tão realisticamente quanto possível.
d) Boa animação requer respeito às leis da física, independentemente da estética.
MÓDULO3
 Analisar os principais conceitos relativos à animação digital, sua evolução e seu desenvolvimento.
 Vídeo
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Introdução
Devemos compreender que, por causa do sucesso da PIXAR com seu primeiro longa, Toy Story, toda a indústria de comerciais de música,
programas de televisão, filmes de longa metragem rapidamente abandonaram as outrora amadas formas de arte feitas analogicamente.
Ninguém ficou imune a essa mudança, a animação 2D rapidamente desapareceu e isso trouxe tempos sombrios para aqueles animadores
tradicionais. Muitos deixaram a indústria completamente para nunca mais voltar.
Fonte: Shutterstock | Por: Nadia Snopek.
Fonte: Freepik
Mas, para os poucos afortunados que acreditaram e permaneceram em seus sonhos, as coisas melhorariam. A produção televisiva parecia
ser o único lugar que manteria a chama viva por mais de 10 anos, apresentando trabalhos de animação tradicional. Shows de TV e jogos de
videogame ainda recebiam as técnicas tradicionais como maneiras de explorar um visual diferente dos bits e bytes.
Em 1975, a Kodak construiu a primeira câmera digital. A tecnologia era grosseira e acabou abandonada, mas o conceito
estava lá.
No final da década de 1990, as primeiras câmeras digitais de consumo estavam acessíveis o suficiente como um brinquedo
divertido para aqueles que pudessem comprá-las.
Em meados de 2000, isso mudaria e as câmeras digitais estavam em todo lugar. A tecnologia finalmente alcançou a
indústria e isso marcou o começo de uma nova era.
Por causa do avanço dos computadores e da velocidade com que eles poderiam operar, as técnicas de filmagem e televisão foram
transferidas de salas escuras para processamento de filmes. Isso muitas vezes significava longas horas antes que alguém pudesse ver o
resultado de seus esforços, para uma rápida produção, usando computadores para editar, compor e até produzir música e efeitos
sonoros.
� Fonte: Shutterstock | Por: doodlia.
computadores
O primeiro sistema acessível foi chamado de Video Toaster. Ele permitiu que a produção televisiva editasse e produzisse vídeo de conteúdo
usando o computador Amiga2000. A velocidade dessa nova maneira de fazer filmes e programas de TV fez a indústria cinematográfica
avançar anos-luz.
�
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
ç
A velocidade dessa nova maneira de fazer filmes e programas de TV fez a indústria cinematográfica avançar anos-luz. Agora, se
acrescentarmos que as câmeras e filmadoras digitais finalmente alcançaram o acesso da tecnologia popular e os softwares tinham
processamento cada vez mais rápido tanto em computadores quanto em laptops, a pergunta que fica é:
Qual a diferença da animação digital?
Sem dúvida existe um grande abismo visual quando falamos de computação gráfica 3D. Esse novo modelo de representação visual criou
um novo braço da animação:
2D
Uma adequação para as novas mesas digitalizadoras, scanners e softwares
Animação digital
Utiliza a mesma técnica da animação tradicional, evitando o uso analógico de material e otimizando o trabalho.
3D
Os fotogramas são renderizados a partir de modelos tridimensionais gerados por computador. São o adeus à tinta, ao papel e aos cenários
ilustrados ou modelados
Atualmente existe um equilíbrio entre o ecossistema analógico e o digital – estúdios desenvolvem técnicas de trabalho, sempre buscando a
otimização e a qualidade, para construírem uma estética bela e interessante.
A animação digital engloba todas as técnicas que são feitas exclusivamente com o uso de computadores, completa ou parcialmente, dentro
do ramo da imagem gerada por computador (CGI) e da computação gráfica, que lida com a geração de imagens digitais em movimento.
Fonte: Shutterstock | Por: Gorodenkoff.
Efeitos especiais, também conhecidos como VFX (Video Effects) são uma parte cotidiana do entretenimentomoderno, incluindo programas
de televisão, filmes e videogames. Essas imagens de mídia exigem as habilidades especializadas de animadores de computador.
Para ter uma visão geral do campo da animação por computador, bem como as opções
acadêmicas e profissionais disponíveis no campo, você deve entender que nunca foi tão fácil
fazer animações, visto que a história da animação já passou por muitas transformações e,
mais do que nunca, a indústria e a tecnologia buscaram otimização e tempo de execução
curtos na construção de elementos de animação para diversos fins.
Fonte: Shutterstock | Por: Kit8.net
Como vimos, animar significa dar vida a algo.
O trabalho de um animador é pegar uma imagem estática ou um objeto e literalmente trazê-lo à vida, dando-lhe movimento e personalidade.
Na animação por computador, os animadores usam software para desenhar, modelar e animar objetos e personagens em vastas paisagens
digitais. Existem dois tipos básicos de animação por computador:
Assistida por computador
Tipicamente bidimensional (2-D), como desenhos animados. O animador desenha objetos e personagens à mão ou com um
computador e posiciona suas criações... 

Gerada por computador
Tridimensional (3-D), significando que objetos e personagens são modelados em um plano com um eixo X, Y e Z. Isso não pode
ser feito com... 
suas criações...
... em quadros-chave, que formam um esboço dos movimentos mais importantes. Em seguida, o computador usa algoritmos matemáticos
para preencher os quadros. Esse processo é chamado de interpolação. Enquadramento e interpolação de chaves são técnicas de animação
tradicionais que podem ser feitas à mão, mas são realizadas muito mais rapidamente com um computador.
feito com...
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
... lápis e papel. Enquadramento e interpolação de chaves ainda são uma função importante da animação gerada por computador, mas
existem outras técnicas que não se relacionam à animação tradicional. Usando algoritmos matemáticos, os animadores podem programar
objetos para aderir a (ou quebrar) leis físicas como gravidade, massa e força. Ou criar imensas manadas e bandos de criaturas que parecem
agir de forma independente, mas coletivamente.
Com animação gerada por computador, em vez de animar cada fio, o pelo de um monstro é projetado para agitar suavemente ao vento e
ficar deitado quando molhado, por exemplo.
O que são imagens animadas digitalmente?
Já sabemos que, quando falamos das animações digitais, devemos dividi-las nos segmentos 2D (bidimensional) e 3D (tridimensional),
porque a forma de se utilizar os modelos desenhados para a animação são completamente diferentes.
É importante fixar que a animação precisa de modelos de representação que serão utilizados
para serem animados.
Esses modelos são processados e criados a partir de vários construtos computacionais.
A tecnologia há muito tempo faz parte do kit de ferramentas do animador. Os animadores da Disney revolucionaram o setor com inovações
como:
Uso de som em curtas-metragens animados.
Suporte de câmera multiplano que criou o efeito paralaxe da profundidade de fundo.
Contudo, as raízes da animação por computador começaram com os pioneiros da computação gráfica no início dos anos 1960, trabalhando
nos principais institutos de pesquisa dos EUA, muitas vezes com financiamento do governo. Seus primeiros filmes foram simulações
científicas com títulos como Fluxo de um fluido viscoso e Propagação de ondas de choque em uma forma sólida.
Fonte: Wikimedia.
Ed Catmull, presidente da Pixar e Walt Disney Animation Studios, foi um dos primeiros a brincar com animação por computador como arte,
começando com uma renderização em 3-D da abertura e do fechamento da mão. A Universidade de Utah foi a fonte dos primeiros avanços
importantes em computação gráfica em 3-D, com o algoritmo de superfície oculta que permite ao computador conceituar objetos
tridimensionais, e o utah teapot , um bule 3-D surpreendentemente renderizado que sinalizou ponto de viragem na qualidade fotorrealista
dos gráficos 3-D.
Utah Teapot
O bule de Utah (em inglês Utah teapot) é um modelo de teste 3D que se tornou objeto de referência padrão e uma piada interna na
comunidade da computação gráfica. É um modelo matemático de um bule comum que parece sólido, cilíndrico e parcialmente convexo.
Um bule de Utah é considerado o equivalente a um programa "Olá Mundo", como uma maneira de criar facilmente uma cena em 3D com um
modelo um tanto complexo, funcionando como uma referência básica de geometria para configuração de cena e luz.
O modelo do bule foi criado em 1975 pelo pesquisador de computação gráfica Martin Newell, membro do programa gráfico pioneiro da
Universidade de Utah.

Saiba mais
javascript:void(0);
https://stecine.azureedge.net/webaula/estacio/go0263/tema2.html?brand=estacio
O filme Halftone Animation, de Ed Catmull e Fred Parke, demonstra algoritmos de sombreamento e esforços iniciais de sincronização labial.
Assista ao filme.
A crescente sofisticação e realismo da animação em 3-D pode ser diretamente creditada a um crescimento exponencial do poder de
processamento do computador.
Hoje, um computador de mesa padrão é executado 5 mil vezes mais rápido do que os usados
por pioneiros da computação gráfica nos anos 1960. E o custo da tecnologia básica para
criação de animação por computador passou de milhões de reais para menos de 4 mil.
javascript:void(0);
Fonte: Shutterstock | Por: alphaspirit.
Dessa maneira, para compreendermos os princípios da animação, devemos recorrer aos conceitos básicos da animação clássica e
tradicional.
Métodos
Incluindo animações digitais em 2-D e 3-D, a animação por computador possibilita imagens deslumbrantes e efeitos especiais que cativam
o público em filmes de grande sucesso como, por exemplo, Vingadores, O Senhor dos Anéis e Transformers.
Os métodos usados na animação por computador variam dependendo da tarefa em particular e podem ser:
A manipulação de uma imagem digital renderizada por um artista gráfico.
O uso do keyframing (substituir imagens por uma versão alterada de si mesmas, geralmente indicando um ligeiro
aumento no tempo).
A captura de movimento para rastrear um ator ou objeto da vida real e depois animar digitalmente por cima deles.
Tipos de animação digital
Começaremos com os primeiros ensinamentos em animação digital com o objetivo de proporcionar a você a construção de uma animação
completa. Os tipos de animação digital e seu ferramentário podem ser divididos nas seguintes categorias:
Animação Digital Cut-out
A animação digital de recorte é feita usando fantoches recortados para animação de personagens. Neste tipo de
animação, os personagens são criados usando um desenho separado para cada parte de seu corpo (cabeça,
pescoço, tronco, braços, pernas etc.), que são então manipulados juntos, pelo software de computador, como um
boneco tradicional. Depois que o boneco é criado, ele pode ser adicionado à cena para ser animado quadro a
quadro.
Animação sem papel
Com a animação sem papel, o animador muitas vezes precisará desenhar caracteres, molduras, plano de fundo e
layout diretamente no computador usando um tablet eletrônico de desenho sensível à pressão. Esta técnica é
muito semelhante à animação tradicional em seu processo, a principal diferença é que tudo é feito no computador.
Animação 3D
Animação tridimensional requer que, antes de animar, um personagem deve ser construído e modelado no
software de animação 3D. Eles são então manipulados com um esqueleto virtual. A partir daí, um personagem
pode ser integrado a uma cena e animado como um boneco digital, quadro a quadro.
Captura de movimento
A técnica de captura de movimento consiste em registrar o movimento de uma pessoa, geralmente o desempenho
de um ator, e usar as informações gravadas para animar um personagem 2Dou 3D digital.
Animação 2D
Na animação 2D, usamos os modelos de representação bidimensionais, chamados de modelos geométricos, que são:
� Fonte: Shutterstock | Por: Meth Mehr; Leremy.
Um objeto como uma figura bidimensional, geralmente no plano Euclidiano ou Cartesiano.

Exemplo
Embora todos os objetos materiais a nossa volta sejam tridimensionais, um modelo geométrico 2D geralmente é adequado para certos
objetos planos, como:
Recortes de papel.
Peças de máquinas feitas de chapas metálicas.
Elementos que compõem outros elementos em 3D.
Modelos geométricos 2D também são convenientes para descrever certos tipos de imagens artificiais, como:
Diagramas técnicos
Logotipos
Glifos de uma fonte
Outros
Eles são uma ferramenta essencial de computação gráfica 2D e frequentemente usados como componentes representativos de modelos
geométricos 3D.
Por exemplo:
Fonte: Shutterstock | Por: FunkWrap.
Descrever os decalques a serem aplicados a um modelo de carro em uma loja de customização.
Uma das práticas da arquitetura moderna é o “rendering digital”: uma técnica usada para formar uma percepção de um modelo geométrico
2D a partir de um modelo geométrico tridimensional projetado por meio de geometria descritiva e equipamento computadorizado.
Dica
Observe que, para produzir esse tema, foram usados muitos recursos de animação 2D. O mercado de Educação é um grande consumidor
da animação.
2D Essencial
Clique no botão acima.
Evolução da animação nos jogos digitais
1980
Com o lançamento do Nintendo Entertainment System (NES) no início dos anos 1980, os jogos finalmente começariam a
desenvolver sua própria estética que poderia separá-los de outros jogos na mesma plataforma.
Embora os gráficos mantivessem a sua aparência geral, era possível, instantaneamente, diferenciar os jogos por meio de
seus modelos 2D, paletas de cores e estilo exclusivos.  
Foi no NES que a narrativa e a música também começaram a desempenhar papéis mais importantes nos jogos, levando à
criação de RPGs, como Dragon Warrior, que combinaram todos os três aspectos para criar uma aventura cativante para os
jogadores.
Nesse período, a animação para os jogos ainda era algo simplificado pelas limitações de resolução e quantidade de
quadros para interpolar movimentos.
Nesse período, a animação para os jogos ainda era algo simplificado pelas limitações de resolução e
quantidade de quadros para interpolar movimentos.
1990
A partir da década de 1990, a arte e a animação do jogo realmente começaram a espalhar suas asas, indo por diferentes
caminhos.
Enquanto os principais sistemas da época (Super Nintendo e Sega Mega Drive) ofereceram gráficos mais exuberantes e
detalhados do que a geração anterior, as duas empresas também se interessaram por regiões ainda não exploradas.
Seria possível, então, representar ciclos de animação completos, simulando melhor os movimentos de personagens e
dando maior credibilidade e imersão para os jogadores.
A Sega lançou um add-on baseado em CD para o seu console Genesis, chamado Sega CD. A novidade do espaço maior
para armazenar jogos e a capacidade de exibir videoclipes reais levou à criação de vários videogames com a tecnologia
Full-Motion Video (FMV), que combinavam jogabilidade com segmentos de vídeo na tela.
A maioria dos jogos, no entanto, permanecia intocada e, embora clipes animados e vídeos do mundo real continuassem
vivos nos jogos em cenas de interlúdios, apresentações e fechamentos das narrativas, os jogos FMV deixariam de existir.
Era possível, dessa maneira, inserir animação tradicional nos games. Por algum tempo, diversos animadores foram
amplamente contratados, principalmente no Japão, para realizar esses segmentos de vídeo para a indústria dos jogos
eletrônicos.
Com os sistemas mais poderosos e expansivos baseados em CD (e mais tarde DVD), das mais recentes gerações de
consoles, o jogo como uma forma de arte conseguiu se desenvolver completamente por meio de sua dimensão em 2D.
Estilos gráficos
Jogos 2D
O 2D foi o estilo gráfico mais comum de jogo até o final dos anos 1990, sendo substituído pelos jogos 2.5D e 3D.
Os jogos em 2D são essencialmente mostrados de um ponto de vista. Geralmente a visão é:
Do topo - Jogos de cima para baixo, como a franquia Ikari Warriors e vários jogos de tiro dos anos 1980.
De lado - Jogos side-scrolling ou plataforma, como Mario e Sonic, ou outros jogos de tiro, alguns dos quais usam ambas as
vistas.
Jogos isométricos
São uma variação do 2D. Essencialmente de imagem fixa e 2D, mas fazem isso em um ângulo que lhes dá uma aparência mais
tridimensional.
Um dos jogos mais populares de todos os tempos nessa visão, Diablo, usa essa perspectiva. Fallout e Civilization são outros que
utilizam a técnica.
Jogos 2.5D
Os jogos 2.5D abrangem a linha entre o 2D e o 3D e, muitas vezes, há alguma confusão sobre o que são.
Ao contrário de um jogo 2D, que admite o movimento em apenas duas direções e um ponto de vista fixo, os jogos 2.5D
normalmente expandem isso, permitindo:
O movimento em 3 campos (como um jogo 3D).
Que o ponto de vista do jogador seja manipulado (embora não tão perfeitamente quanto é possível em um jogo completamente
em 3D).
Muitos jogos de luta modernos como Street Fighter e Super Smash Bros. são jogos 2.5D, assim como os jogos Grandia e Little Big
Planet.
Jogos 3D
O 3D (tridimensional) é o estilo de animação mais popular na atualidade. Ele usa imagens totalmente geradas por computador
para criar sequências animadas.
Este tipo de animação permite:
O movimento em 3 campos - o controlo total da cena, personagens e objetos.
Que o ponto de vista do jogador seja manipulado - perspectiva 360º de todos os elementos em um espaço virtual.
Os software utilizados mais conhecidos são o Maya, 3D Studio Max e Blender. Muitos jogos de luta modernos como Virtua
Fighter, SoulCalibur, Tekken e Dead or Alive usam essa técnica.
Os desenvolvedores não estavam mais limitados pelo que podiam fazer. Novos tipos de jogos eram criados e diferentes
estilos gráficos eram utilizados. Cada jogo era agora plenamente capaz de se expressar de uma maneira única, e podia
usar sua arte e imaginação para contar uma história de forma exclusiva, seja ela inclusiva ou independente de sua
jogabilidade.
No final dos anos 1990, o 3D começou a entrar em cena nos arcades e tudo mudou. A tecnologia avançou,
criando desde a exploração de enormes paisagens virtuais em jogos como Grand Theft Auto até a
exploração dos pontos mais distantes da galáxia em Halo. Os jogadores poderiam agora estar
completamente imersos nos visuais de um jogo e transportados para uma aventura diferente a cada
jogada.
Este tipo de animação permite criar objetos realistas com recurso a iluminação e texturas. O método de animação
começa com uma imagem, chamada de frame, seguida por outra frame com ligeiras alterações. Após a conclusão
da cena, a passagem das várias imagens em rápida sucessão criam a ilusão de movimento.
Ao contrário da animação 2D, este método é facilitado pelo cálculo automático de movimento auxiliado pelo
software de animação tridimensional que torna este tipo de animação mais rápida e consequentemente mais
acessível de produzir.
Como vimos, o vídeo de animação tem sido usado há muito tempo nos jogos para ajudar a contar uma história. As cenas
animadas eram frequentemente vistas como uma espécie de recompensa por progredir no jogo, pois representavam os aspectos
mais memoráveis da apresentação visual dele.

Atenção
As cutscenes renderizadas ainda são usadas em muitos jogos hoje, especialmente para abrir e terminar sequências de narrativas de
jogos. Com as capacidades gráficas se aproximando agora da qualidade real, muitos jogos evitam completamente o formato e preferem
manter os jogadores imersos no mundo do jogo por meio de seus gráficos reais.
Contudo, a indústria da animação para os jogos não se ateve apenas à inserção dos vídeos. Tanto como no 2D como no 3D, técnicas
eficientes de animação por computador,