Animação para Web
Profa. Dra. Daniela Carvalho

daniela.carvalho@esamc.br

2015 - cibercultural.com
História www.evolutionoftheweb.com
GIF
Graphics Interchange
Format
1987
GIF
• Acrônimo de Graphics Interchange Format;
• É um formato de imagem bitmap;
• Criado pela CompuServe em 1987;
• Amplamente utilizado no início da Web (WWW ou World
Wide Web);
• Formato de 8 bits e aceita 256 cores;
• Suporta animação e transparência.
Vantagens do GIF
• Ele possui sistema de compactação sem perdas;
• Permite tamanho de arquivo reduzido;
• Possui suporte à animação;
• Aceita transparência;
• Todos os navegadores e clientes de e-mail suportam
este formato.
Desvantagem do GIF
• Restrito a 256 cores:
• Embora tenha compactação sem perdas, não
consegue armazenar a quantidade de informações
que uma fotografia requer;
• Restrita à imagens com poucas cores (logos e
ilustrações).
Principais utilizações atuais do GIF
• Animações em:
• Logos;
• Tutoriais simples;
• E-mail marketing.
Referências
ENTUSIASMO. GIF: A Technical History. Disponível em
<http://enthusiasms.org/post/16976438906>. Acesso em
27 Maio 2015.
JOHNSON, Paddy. A Brief History of Animated GIF Art,
Part One. 2014. Disponível em <https://news.artnet.com/
art-world/a-brief-history-of-animated-gif-art-part-
one-69060>. Acesso em 27 Maio 2015.
OFFBOOKS. Animated GIFs. Disponível em <http://
video.pbs.org/video/2207348428/>. Acesso em 27 Maio
2015.
Macromedia
Shockwave (1995)
Adobe Shockwave (2005)
Shockwave
• É um multimídia plugin;
• O Shockwave Player exibe conteúdos da Internet que
foram criados usando o Adobe Director;
• Utilizado para apresentações multimídia e jogos;
• Antecessor do Flash.
Referências
• ADOBE. Adobe Shockwave Player. Disponível em <
http://www.adobe.com/products/
shockwaveplayer.html>. Acesso em 27 Maio 2015.
• ADOBE. Director Help: Shockwave Player version
history. Disponível em <https://helpx.adobe.com/
shockwave/kb/shockwave-player-version-history.html>.
Acesso em 27 Maio 2015.
Flash
1996 - Macromedia Flash

2005 - Adobe Flash
Flash
• Solução de animação vetorial que consiste em editor e
plugin;
• Representou o principal recurso de animação multimídia
para web até o surgimento do HTML 5;
• Sua principal limitação é necessitar da instalação de
plugin. Alguns usuários não querem instalar em seus
computadores e alguns dispositivos móveis não
suportam sua instalação. Desta forma, perde-se
conteúdo.
Principais utilizações atuais do Flash
• Jogos;
• Aplicativos para celulares e tablets;
• Sua versão recente (Flash CC) possui recurso de
conversão da animação em código HTML, CSS e
JavaScript.
Referência
• ADOBE. Adobe Flash Professional CC. Disponível em
< http://www.adobe.com/br/products/flash.html>.
Acesso em 27 Maio 2015.
HTML 5
2014
HTML 5
• A linguagem de programação web, em sua atual versão
HTML 5, permite animação nativa. Ou seja, não requer
instalação de plugins. É mais leve e compatível com as
versões recentes dos navegadores;
• Requer a utilização de CSS e JavaScript para aplicação
de estilos gráficos e controle de animação.
Principais editores de animação HTML 5
• Adobe Flash CC [Creative Cloud] (http://
www.adobe.com/br/products/flash.html);
• Google Webdesigner (http://www.google.com/
webdesigner);
• Tumult Hype (http://tumult.com/hype).
Referências
• PILGRIM, Mark. Dive Into HTML 5. Disponível em
<http://diveintohtml5.com.br>. Acesso em 27 Maio
2015.
• HONGKIAT. 20 Animated And Interactive Infographics
You Have To See. Disponível em < http://
www.hongkiat.com/blog/animated-interactive-
infographics>. Acesso em 27 Maio 2015.
Animação Princípios
1- Squash and
Stretch
comprimir e esticar o objeto
demonstra a mudança de sua
forma durante a ação, ou seja,
movimento e flexibilidade.
2- Antecipation
a antecipação do movimento
prepara para a ação seguinte,
essa antecipação gera força ao
movimento.
3- Staging
a encenação apresenta um
elemento dirigindo a atenção do
telespectador para ele, esse
conceito deixa claro visualmente
a presença de algo novo e da
ação seguinte.
4- Straight Ahead Action
and Pose to Pose
significa ação linear e pose a
pose que são duas técnicas de
animação. A ação linear ocorre
quando o movimento é direto até
o final da cena, essa maneira
passa maior fluidez para a
animação de forma mais
espontânea e menos mecânica.
No estilo pose a pose o animador
planeja a quantidade de
intervalos para obter o timing
desejado, o resultado dessa
técnica é uma animação mais
plana.
5- Overlapping Action
and Follow Through
é a continuidade e sobreposição
da ação, para cada movimento
existe uma característica de
acordo com o elemento em
questão, considerando todas as
suas peculiaridades.
6- Slow In and Slow
Out
o animador utiliza o tempo de
ação dos elementos para calcular
e utilizar a aceleração e
desaceleração dos movimentos
de acordo com a ideia que
deseja passar.
7- Arcs
são movimentos em arcos que
criam a trajetória da ação de
algum elemento.
8- Secondary Actions
cenas que apresentam ações
secundárias que completam ou
dependem da ação principal.
9- Timing
o controle do tempo de uma
ação é importante para conseguir
o efeito desejado, junto com o
tempo temos o espaço. Essas
condições fazem com que a
animação seja interpretada por
quem assiste e geram dinâmicas
e ritmos que devem ser
passados a esses.
10- Exaggeration
o exagero de formas, emoções,
idéias, ou seja, o exagero do real
reforça o conceito da ideia para
que a comunicação visual seja a
mais efetiva possível.
11- Solid Drawing
esse conceito refere-se ao
desenho, sua eficácia e
qualidade, ou seja, é a
capacidade de identificar o
desenho em qualquer posição,
identificar características como
peso, profundidade e equilíbrio.
12- Appeal
atração do publico com o
personagem deve ser passada
pelo animador, essa atração tem
haver com a beleza do desenho,
charme e simplicidade.
Referências
• É ISSO MESMO PRODUÇÃO. Os 12 princípios da
animação. Disponível em <http://
eissomesmoproducao.com.br/os-12-principios-da-
animacao>. Acesso em 27 Maio 2015.
• JOHNSTON, Ollie; THOMAS,Frank. Disney Animation –
The illusion os life. Disponível em <http://vk.com/
doc-58650815_254012664?dl=c753708760f72ab566>.
Acesso em 27 Maio 2015.
Rich Media Guidance
(IAB.net)
http://www.iab.net/guidelines/508676/508767/
displayguidelines
Linguagens da Web Formas de significações
– Pierre Lévy
“A World Wide Web é uma função da Internet
que junta, em um único e imenso hipertexto ou
hiperdocumento (compreendendo imagens e
sons), todos os documentos e hipertextos que
a alimentam.”
As Múltiplas
Alfabetizações Midiáticas
• Meyrowtiz (2001) chama
atenção sobre a necessidade
de entender o significado das
variáveis de produção dentro
de cada meio. É uma evolução
do pensamento baseado na
teoria sobre Meios Quente e
Meios Frios, de McLuhan.

• Ao propor que sejam
identificadas as variáveis
gramaticais (de ideais, de
conteúdo e de produção) de
cada meio, é possível alterar a
percepção do conteúdo da
mensagem.
Significações
• Hibridismo digital, é uma
mistura, no qual as
características das variáveis
gramaticais selecionadas se
dialogam e produzem novas
abordagens, novas propostas,
dando a impressão de novidade.

• As imagens ao lado neste slide e
no anterior ilustram as possíveis
linguagens associadas a cada
meio de comunicação no
ciberespaço, ou seja, sua
função no mundo virtual, digital,
e sua analogia aos objetos e
situações do mundo físico.
Uso de linguagens
• A proposta de Meyrowtiz de levantar as variáveis gramaticais
possibilita a identicar os tipos de linguagens dos veículos de
comunicação, bem como abre caminhos para novas abordagens.
Esta é basicamente a proposta apresentada por Lévy (1993),
quando propõe uma reflexão sobre as metáforas do hipertexto.
• 	 De acordo com Lévy (1999, p. 40), "o hipertexto é constituído
por nós (os elementos de informação, parágrafos, páginas,
imagens, sequências musicais etc.) e por links entre esses nós,
referências, notas, ponteiros, "botões" indicando a passagem de
um nó a outro". Esses nós podem ser qualquer coisa, arquivos,
pessoas, computadores, webite, cidade, empresa, uma infinidade
de possibilidades interligáveis.
Referências
• LÉVY, Pierre. Cibercultura. São Paulo: Editora 34, 1999.
• MEYROWITZ, Joshua. As Múltiplas Alfabetizações
Midiáticas. 2001. Disponível em <http://
revistaseletronicas.pucrs.br/ojs/index.php/
revistafamecos/article/view/3125>. Acesso em 29 Abr
2014.

Animação na web

  • 1.
    Animação para Web Profa.Dra. Daniela Carvalho [email protected] 2015 - cibercultural.com
  • 2.
  • 3.
  • 4.
    GIF • Acrônimo deGraphics Interchange Format; • É um formato de imagem bitmap; • Criado pela CompuServe em 1987; • Amplamente utilizado no início da Web (WWW ou World Wide Web); • Formato de 8 bits e aceita 256 cores; • Suporta animação e transparência.
  • 5.
    Vantagens do GIF •Ele possui sistema de compactação sem perdas; • Permite tamanho de arquivo reduzido; • Possui suporte à animação; • Aceita transparência; • Todos os navegadores e clientes de e-mail suportam este formato.
  • 6.
    Desvantagem do GIF •Restrito a 256 cores: • Embora tenha compactação sem perdas, não consegue armazenar a quantidade de informações que uma fotografia requer; • Restrita à imagens com poucas cores (logos e ilustrações).
  • 7.
    Principais utilizações atuaisdo GIF • Animações em: • Logos; • Tutoriais simples; • E-mail marketing.
  • 8.
    Referências ENTUSIASMO. GIF: ATechnical History. Disponível em <http://enthusiasms.org/post/16976438906>. Acesso em 27 Maio 2015. JOHNSON, Paddy. A Brief History of Animated GIF Art, Part One. 2014. Disponível em <https://news.artnet.com/ art-world/a-brief-history-of-animated-gif-art-part- one-69060>. Acesso em 27 Maio 2015. OFFBOOKS. Animated GIFs. Disponível em <http:// video.pbs.org/video/2207348428/>. Acesso em 27 Maio 2015.
  • 9.
  • 10.
    Shockwave • É ummultimídia plugin; • O Shockwave Player exibe conteúdos da Internet que foram criados usando o Adobe Director; • Utilizado para apresentações multimídia e jogos; • Antecessor do Flash.
  • 11.
    Referências • ADOBE. AdobeShockwave Player. Disponível em < http://www.adobe.com/products/ shockwaveplayer.html>. Acesso em 27 Maio 2015. • ADOBE. Director Help: Shockwave Player version history. Disponível em <https://helpx.adobe.com/ shockwave/kb/shockwave-player-version-history.html>. Acesso em 27 Maio 2015.
  • 12.
    Flash 1996 - MacromediaFlash 2005 - Adobe Flash
  • 13.
    Flash • Solução deanimação vetorial que consiste em editor e plugin; • Representou o principal recurso de animação multimídia para web até o surgimento do HTML 5; • Sua principal limitação é necessitar da instalação de plugin. Alguns usuários não querem instalar em seus computadores e alguns dispositivos móveis não suportam sua instalação. Desta forma, perde-se conteúdo.
  • 14.
    Principais utilizações atuaisdo Flash • Jogos; • Aplicativos para celulares e tablets; • Sua versão recente (Flash CC) possui recurso de conversão da animação em código HTML, CSS e JavaScript.
  • 15.
    Referência • ADOBE. AdobeFlash Professional CC. Disponível em < http://www.adobe.com/br/products/flash.html>. Acesso em 27 Maio 2015.
  • 16.
  • 17.
    HTML 5 • Alinguagem de programação web, em sua atual versão HTML 5, permite animação nativa. Ou seja, não requer instalação de plugins. É mais leve e compatível com as versões recentes dos navegadores; • Requer a utilização de CSS e JavaScript para aplicação de estilos gráficos e controle de animação.
  • 18.
    Principais editores deanimação HTML 5 • Adobe Flash CC [Creative Cloud] (http:// www.adobe.com/br/products/flash.html); • Google Webdesigner (http://www.google.com/ webdesigner); • Tumult Hype (http://tumult.com/hype).
  • 19.
    Referências • PILGRIM, Mark.Dive Into HTML 5. Disponível em <http://diveintohtml5.com.br>. Acesso em 27 Maio 2015. • HONGKIAT. 20 Animated And Interactive Infographics You Have To See. Disponível em < http:// www.hongkiat.com/blog/animated-interactive- infographics>. Acesso em 27 Maio 2015.
  • 20.
  • 21.
    1- Squash and Stretch comprimire esticar o objeto demonstra a mudança de sua forma durante a ação, ou seja, movimento e flexibilidade.
  • 22.
    2- Antecipation a antecipaçãodo movimento prepara para a ação seguinte, essa antecipação gera força ao movimento.
  • 23.
    3- Staging a encenaçãoapresenta um elemento dirigindo a atenção do telespectador para ele, esse conceito deixa claro visualmente a presença de algo novo e da ação seguinte.
  • 24.
    4- Straight AheadAction and Pose to Pose significa ação linear e pose a pose que são duas técnicas de animação. A ação linear ocorre quando o movimento é direto até o final da cena, essa maneira passa maior fluidez para a animação de forma mais espontânea e menos mecânica. No estilo pose a pose o animador planeja a quantidade de intervalos para obter o timing desejado, o resultado dessa técnica é uma animação mais plana.
  • 25.
    5- Overlapping Action andFollow Through é a continuidade e sobreposição da ação, para cada movimento existe uma característica de acordo com o elemento em questão, considerando todas as suas peculiaridades.
  • 26.
    6- Slow Inand Slow Out o animador utiliza o tempo de ação dos elementos para calcular e utilizar a aceleração e desaceleração dos movimentos de acordo com a ideia que deseja passar.
  • 27.
    7- Arcs são movimentosem arcos que criam a trajetória da ação de algum elemento.
  • 28.
    8- Secondary Actions cenasque apresentam ações secundárias que completam ou dependem da ação principal.
  • 29.
    9- Timing o controledo tempo de uma ação é importante para conseguir o efeito desejado, junto com o tempo temos o espaço. Essas condições fazem com que a animação seja interpretada por quem assiste e geram dinâmicas e ritmos que devem ser passados a esses.
  • 30.
    10- Exaggeration o exagerode formas, emoções, idéias, ou seja, o exagero do real reforça o conceito da ideia para que a comunicação visual seja a mais efetiva possível.
  • 31.
    11- Solid Drawing esseconceito refere-se ao desenho, sua eficácia e qualidade, ou seja, é a capacidade de identificar o desenho em qualquer posição, identificar características como peso, profundidade e equilíbrio.
  • 32.
    12- Appeal atração dopublico com o personagem deve ser passada pelo animador, essa atração tem haver com a beleza do desenho, charme e simplicidade.
  • 33.
    Referências • É ISSOMESMO PRODUÇÃO. Os 12 princípios da animação. Disponível em <http:// eissomesmoproducao.com.br/os-12-principios-da- animacao>. Acesso em 27 Maio 2015. • JOHNSTON, Ollie; THOMAS,Frank. Disney Animation – The illusion os life. Disponível em <http://vk.com/ doc-58650815_254012664?dl=c753708760f72ab566>. Acesso em 27 Maio 2015.
  • 34.
  • 35.
    Linguagens da WebFormas de significações
  • 36.
    – Pierre Lévy “AWorld Wide Web é uma função da Internet que junta, em um único e imenso hipertexto ou hiperdocumento (compreendendo imagens e sons), todos os documentos e hipertextos que a alimentam.”
  • 37.
    As Múltiplas Alfabetizações Midiáticas •Meyrowtiz (2001) chama atenção sobre a necessidade de entender o significado das variáveis de produção dentro de cada meio. É uma evolução do pensamento baseado na teoria sobre Meios Quente e Meios Frios, de McLuhan. • Ao propor que sejam identificadas as variáveis gramaticais (de ideais, de conteúdo e de produção) de cada meio, é possível alterar a percepção do conteúdo da mensagem.
  • 38.
    Significações • Hibridismo digital,é uma mistura, no qual as características das variáveis gramaticais selecionadas se dialogam e produzem novas abordagens, novas propostas, dando a impressão de novidade. • As imagens ao lado neste slide e no anterior ilustram as possíveis linguagens associadas a cada meio de comunicação no ciberespaço, ou seja, sua função no mundo virtual, digital, e sua analogia aos objetos e situações do mundo físico.
  • 39.
    Uso de linguagens •A proposta de Meyrowtiz de levantar as variáveis gramaticais possibilita a identicar os tipos de linguagens dos veículos de comunicação, bem como abre caminhos para novas abordagens. Esta é basicamente a proposta apresentada por Lévy (1993), quando propõe uma reflexão sobre as metáforas do hipertexto. • De acordo com Lévy (1999, p. 40), "o hipertexto é constituído por nós (os elementos de informação, parágrafos, páginas, imagens, sequências musicais etc.) e por links entre esses nós, referências, notas, ponteiros, "botões" indicando a passagem de um nó a outro". Esses nós podem ser qualquer coisa, arquivos, pessoas, computadores, webite, cidade, empresa, uma infinidade de possibilidades interligáveis.
  • 40.
    Referências • LÉVY, Pierre.Cibercultura. São Paulo: Editora 34, 1999. • MEYROWITZ, Joshua. As Múltiplas Alfabetizações Midiáticas. 2001. Disponível em <http:// revistaseletronicas.pucrs.br/ojs/index.php/ revistafamecos/article/view/3125>. Acesso em 29 Abr 2014.