Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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;
• Amplam...
Vantagens do GIF
• Ele possui sistema de compactação sem perdas;
• Permite tamanho de arquivo reduzido;
• Possui suporte à...
Desvantagem do GIF
• Restrito a 256 cores:
• Embora tenha compactação sem perdas, não
consegue armazenar a quantidade de i...
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 Ma...
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 Dire...
Referências
• ADOBE. Adobe Shockwave Player. Disponível em <
http://www.adobe.com/products/
shockwaveplayer.html>. Acesso ...
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...
Principais utilizações atuais do Flash
• Jogos;
• Aplicativos para celulares e tablets;
• Sua versão recente (Flash CC) po...
Referência
• ADOBE. Adobe Flash Professional CC. Disponível em
< http://www.adobe.com/br/products/flash.html>.
Acesso em 27...
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ç...
Principais editores de animação HTML 5
• Adobe Flash CC [Creative Cloud] (http://
www.adobe.com/br/products/flash.html);
• ...
Referências
• PILGRIM, Mark. Dive Into HTML 5. Disponível em
<http://diveintohtml5.com.br>. Acesso em 27 Maio
2015.
• HONG...
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 fl...
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 visu...
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 lin...
5- Overlapping Action
and Follow Through
é a continuidade e sobreposição
da ação, para cada movimento
existe uma caracterí...
6- Slow In and Slow
Out
o animador utiliza o tempo de
ação dos elementos para calcular
e utilizar a aceleração e
desaceler...
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....
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 c...
11- Solid Drawing
esse conceito refere-se ao
desenho, sua eficácia e
qualidade, ou seja, é a
capacidade de identificar o
des...
12- Appeal
atração do publico com o
personagem deve ser passada
pelo animador, essa atração tem
haver com a beleza do dese...
Referências
• É ISSO MESMO PRODUÇÃO. Os 12 princípios da
animação. Disponível em <http://
eissomesmoproducao.com.br/os-12-...
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 (com...
As Múltiplas
Alfabetizações Midiáticas
• Meyrowtiz (2001) chama
atenção sobre a necessidade
de entender o significado das
v...
Significações
• Hibridismo digital, é uma
mistura, no qual as
características das variáveis
gramaticais selecionadas se
dia...
Uso de linguagens
• A proposta de Meyrowtiz de levantar as variáveis gramaticais
possibilita a identicar os tipos de lingu...
Referências
• LÉVY, Pierre. Cibercultura. São Paulo: Editora 34, 1999.
• MEYROWITZ, Joshua. As Múltiplas Alfabetizações
Mi...
Upcoming SlideShare
Loading in …5
×

Animação na web

1,062 views

Published on

Os slides foram preparados para a aula sobre animação em um projeto Web. Neles procuro abordar um pouco sobre os principais formatos GIF animado, Shockwave, Flash e HTML 5. Algumas técnicas gerais de animação e as especificidades para web, nas questões técnicas e de linguagem.

Published in: Design

Animação na web

  1. 1. Animação para Web Profa. Dra. Daniela Carvalho daniela.carvalho@esamc.br 2015 - cibercultural.com
  2. 2. História www.evolutionoftheweb.com
  3. 3. GIF Graphics Interchange Format 1987
  4. 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. 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. 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. 7. Principais utilizações atuais do GIF • Animações em: • Logos; • Tutoriais simples; • E-mail marketing.
  8. 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. 9. Macromedia Shockwave (1995) Adobe Shockwave (2005)
  10. 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. 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. 12. Flash 1996 - Macromedia Flash 2005 - Adobe Flash
  13. 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. 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. 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. 16. HTML 5 2014
  17. 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. 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. 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. 20. Animação Princípios
  21. 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. 22. 2- Antecipation a antecipação do movimento prepara para a ação seguinte, essa antecipação gera força ao movimento.
  23. 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. 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. 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. 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. 27. 7- Arcs são movimentos em arcos que criam a trajetória da ação de algum elemento.
  28. 28. 8- Secondary Actions cenas que apresentam ações secundárias que completam ou dependem da ação principal.
  29. 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. 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. 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. 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. 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. 34. Rich Media Guidance (IAB.net) http://www.iab.net/guidelines/508676/508767/ displayguidelines
  35. 35. Linguagens da Web Formas de significações
  36. 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. 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. 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. 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. 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.

×