Animação para Web

Profa. Dra. Daniela Carvalhodaniela.carvalho@esamc.br2015 - 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 Flash2005 - 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.