O documento discute as principais tecnologias de animação para web ao longo do tempo, incluindo GIF, Shockwave, Flash e HTML5. Apresenta também os 12 princípios fundamentais da animação e as variáveis gramaticais dos meios de comunicação.

1. Animação para Web
Profa. Dra. Daniela Carvalho
daniela.carvalho@esamc.br
2015 - cibercultural.com

2. História www.evolutionoftheweb.com

3. GIF
Graphics Interchange
Format
1987

4. 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.

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 atuais do GIF
• Animações em:
• Logos;
• Tutoriais simples;
• E-mail marketing.

8. 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.

9. Macromedia
Shockwave (1995)
Adobe Shockwave (2005)

10. 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.

11. 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.

12. Flash
1996 - Macromedia Flash
2005 - Adobe Flash

13. 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.

14. 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.

15. Referência
• ADOBE. Adobe Flash Professional CC. Disponível em
< http://www.adobe.com/br/products/flash.html>.
Acesso em 27 Maio 2015.

16. HTML 5
2014

17. 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.

18. 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).

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. Animação Princípios

21. 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.

22. 2- Antecipation
a antecipação do movimento
prepara para a ação seguinte,
essa antecipação gera força ao
movimento.

23. 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.

24. 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.

25. 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.

26. 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.

27. 7- Arcs
são movimentos em arcos que
criam a trajetória da ação de
algum elemento.

28. 8- Secondary Actions
cenas que apresentam ações
secundárias que completam ou
dependem da ação principal.

29. 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.

30. 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.

31. 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.

32. 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.

33. 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.

34. Rich Media Guidance
(IAB.net)
http://www.iab.net/guidelines/508676/508767/
displayguidelines

35. Linguagens da Web Formas de significações

36. – 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.”

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.