Animação Web

1. AnimaçõesWeb
Prof.ª MestreCristiane Fidelix

3. O primeiro desenho animado moderno pode ter sido
Fantasmagorie, do francês Émile Cohl, projetado pela primeira
vez em 17 de Agosto de 1908 no ‘Théâtre du Gymnase’, em Paris.
Émile Cohl espalhou sua técnica pelos Estados Unidos.
Segundo consta em alguns documentos, o primeiro filme de longa-
metragem animado teria sido El Apóstol (1917) do argentino
Quirino Cristiani.
Infelizmente, não existem cópias desse filme, e pouco se sabe
sobre ele.
Sendo assim, considera-se o longa-metragem animado mais antigo
ainda existente o filme Die Abenteuer des Prinzen Achmed
(1926, dir. Lotte Reiniger).

5. Nomes famosos do passado: Ray Harryhausen (A 20 Milhões de
Milhas da Terra), Walt Disney (Mickey Mouse), Walter Lantz (Pica-Pau).
Nomes famosos contemporâneos: Nick Park (Fuga das
Galinhas), Peter Chung (Aeon Flux), Will Vinton (campanha do
chocolate M&M).
Estúdios de animação do passado: DePatie-Freleng Enterprises (A
pantera cor-de-rosa), Hanna-Barbera Productions (Zé Colméia),
Metro-Goldwyn-Mayer (leão como logomarca).
Estúdios de animação contemporâneos: Pixar (Toy Story), Walt
Disney Studios (Nem Que a Vaca Tussa).

7. Animação tradicional (animação por
célula ou animação desenhada à mão): é a mais
velha e historicamente a mais popular forma de
animação. Em um desenho animado de forma
tradicional, cada quadro é desenhado à mão.
Animação em células: os desenhos são feitos a
mão e re-traçados ou copiados num plástico
transparente chamado célula. Depois coloca-se a
célula sobre um fundo pintado e os movimentos
são fotografados um a um com uma câmara. O
uso de células e de câmaras já está ultrapassado
desde de que os desenhos passaram a ser
scaneados para o computador e transferidos
digitalmente para as películas de 35mm (e essa
transferência também já está ficando para trás).

8. Pixilation:
técnica de animação stop motion na qual
atores vivos ou objetos reais são utilizados e
captados quadro a quadro (como fotos),
criando uma sequência de animação. Esta
pode ser considerada uma das mais
antigas técnicas de animação.

9. Stop Motion:
https://www.youtube.com/watch?v=YQkC0Qs3aD0

10. Stop Motion:
https://www.youtube.com/watch?v=4beFopPC1NU

11. Rotoscópia: dispositivo que
permite aos animadores redesenhar
quadros de filmagens para ser
usado em animação. Pode ser usado
para animar seguindo uma
referência filmada. Ele pode ser
considerado um desajeitado
precursor da moderna captura de
movimento digital. Rotoscopia foi
utilizada com frequência como
ferramente para efeitos especiais
em filmes. O termo rotoscopia é,
agora, usado de forma generalizada
para os processos digitais
correnspondentes para desenhar
imagens sobre o filme digital
produzindo mattes.

12. O que é Rotoscópia:
https://www.youtube.com/watch?v=6J5G9krkOr0

13. Rotoscópia Disney:
https://www.youtube.com/watch?v=sCoJvu8PF7Q

14. Rotoscópia:
https://www.youtube.com/watch?v=3iBBaZItivw

17. Junto com a popularização da Web,
animações para a mesma também foram se
popularizando. GIF, uma sigla
para Graphics Interchange Format
(Formato de Intercâmbio de Gráficos),
é um tipo de arquivo de imagem que
permite que animações sejam vistas num
Web Browser. Ele era o formato mais
popular para animações na Web. Com o
surgimento de outros formatos, como o
Flash, ele passou a ser utilizado apenas
para pequenas animações.
É a arte de criar imagens em movimento
utilizando computadores. É um subcampo
da computação gráfica e da animação. São
criados cada vez mais trabalhos com o uso
de gráficos de computador a 3D, mas ainda
se usam bastante os gráficos de
computador a 2D. Por vezes, o destino da
animação é o próprio computador, mas por
vezes é outro meio, como filmes dedicados
para propaganda e cinema (interfaces
gráficas, animações, jogos, efeitos
especiais, etc).

19. https://www.youtube.com/watch?v=oDiv6JbVp38
Como a PIXAR SURGIU?
A História da EMPRESA DE ANIMAÇÕES 3D Que MUDOU
O MUNDO

20. https://www.youtube.com/watch?v=9PIGM3Y--vQ

26. Animação GIF

27. Shockwave Director

28. Flash

29. GoogleWebdesigner
Criado em 2013, o Google Web Designer é uma ferramenta para projetos em
HTML5, voltada especialmente para profissionais de web. Ela permite que os
designers produzam conteúdo rico em diversos formados, como banners
publicitários para a web. Ele ainda conta com as funções de desenho e animação,
bem como o efeito 3D, que são mostradas em um editor visual (ambiente
WYSIWYG). A plataforma é simples e intuitiva, e ainda inclui duas redes de
publicidade, DoubleClick e AdMob, do Google.

30. GoogleWebdesigner
Google Web Designer cria-se arquivos CSS, JavaScript e XML.
É como se o profissional pudesse se dedicar exclusivamente para o
design, enquanto a ferramenta faz o trabalho de HTML, CSS ou
Java.
O grande diferencial desta ferramenta é que ela oferece diversas
opções para criação do design, mas todas com uma integração
maior com as linguagens de programação.

31. Instalação: 1º passo
https://www.google.com.br/webdesigner/

32. Instalação: 2º passo

35. O W3C - World WideWeb Consortium
É um consórcio que regulamenta os padrões para web
Quando Tim Berners-Lee criou a web, o HTML e tudo mais, decidiu
que era bom que houvesse um órgão para regulamentar, criar e
manter os padrões para web. Esse órgão não teria fins lucrativos.
O W3C é apoiado por várias empresas como a Microsoft, Samsung,
Apple, Google, Mozilla e etc...
Dessa forma há uma ajuda mútua, fazendo com que essas empresas
tenham sistemas e dispositivos que suportem cada vez mais os
padrões web.

36. O HTML serve para estruturar e o CSS serve para
formatar a informação.

37. Exemplo: Pagina1.html

38. Exemplo: Pagina2.html

39. Exemplo: Estilos.css

40. Animation CSS
Exemplo

41. Exemplo: Pagina3.html

42. Exemplo: Estilos2.css

43. Exemplo: Estilos2.css
Adicionando frame

44. Exemplo: Pagina4

45. As sub-propriedades da propriedade animation são:
animation-delay
Configura o delay entre o tempo em que o elemento é carregado e o inicio da sequência de animação.
animation-direction
Configura se a animação deve ou não alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir.
animation-duration
Configura o tempo que uma animação deveria levar para completar um ciclo.
animation-iteration-count
Configura o numero de vezes que uma animação deveria se repetir; você pode especificar infinito para repetir a animação indefinidamente.
animation-name
Especifica o nome da regra escrevendo os keyframes da animação.

46. http://www.eng.com.br/curso.cfm?course_id=159
https://www.academiccourses.com.br/Cursos/Animação/

48. Ferramentas permitem a criação de animações para Web
https://webflow.com/templates/html/coffeestyle-ecommerce-
website-template
Webflow

49. My Profile
https://cristianes-supercool-project.webflow.io

50. Ferramentas que permitem a criação de banners
https://www.bannersnack.com/br/
Bannersnack

51. Ferramentas de animação
https://www.renderforest.com/pt/
Renderforest