ANIMAÇÕES WEB
AULA 1
estrutura do curso e conceitos fundamentais
professor Luciano Roberto Rocha
www.lrocha.com
Sobre o docente
Especialista em Desenvolvimento Web (UEM)
Mestre em Tecnologia Educacional (UFPR)
Doutorando em Educação - TICs (UFPR)
Diretor do departamento de desenvolvimento Web da
Secretaria de Educação Castro
Consultor em TI da União Nacional dos Dirigentes em
Educação - UNDIME (Brasília)
Consultor em Tecnologia Educacional do Instituto Döll
Instrutor Certificado Adobe System Incorporated (ACE/ACI)
2
Conteúdo programático
Conceitos: Mídia, Tipos de Mídia.
Classificação das Mídias, Multimídia, Aplicações Multimídia.
A interface do Ambiente de Desenvolvimento.
Criação de Elementos Gráficos (Criação de mídia vetorial, layers,
organização de layers em folders, uso das ferramentas de desenho vetorial,
bibliotecas, máscaras, importação de imagens).
Desenvolvendo Animações (frame-a-frame, tweening motion, motion guide
layer, tweening shape – Morph, efeitos de timelines).
Adicionando Interatividade (botões, behaviors, movieclips, múltiplas cenas)
Fundamentos do Rich Media (eventos, símbolos alinhados, Movieclips com
diferentes estágios, uso de timelines secundárias).
Mídias Áudio e Vídeo (importação, behavios de áudio, components de
vídeo).
Publicação e otimização de arquivos para web, com HTML e geração de
executável)
3
Competências e habilidades
Analisar, projetar e desenvolver animações
Aplicar técnicas de animação, efeitos especiais,
estilos de animação, trilhas sonoras
Aplicar técnicas de redução de arquivo para
Web
Desenvolver e utilizar técnicas de animação
Compreender e elaborar layouts complexos
Compreender e desenvolver personagens
4
Procedimentos didáticos
Exposição/Debate/Diálogo sobre conteúdo
proposto no plano de curso.
Realização de exercícios práticos com o auxílio
do laboratório de informática para aplicação e
utilização das diversas técnicas de animação e
desenvolvimento multimídia .
Desenvolvimento de dinâmicas em grupos e
estudo de casos pertinentes à disciplina.
5
Sistemática de avaliação
Duas avaliações parciais, teóricas do conteúdo
ministrado em sala de aula com exercícios e
questões objetivas e/ou descritivas com peso de
3 pontos.
Duas avaliações bimestrais, teóricas ou práticas
dos conhecimentos trabalhados em sala de aula
por meio do desenvolvimento de exercícios de
implementação e aplicação dos temas
pertinentes a disciplina com peso de 7 pontos.
6
Referencial teórico
BIBLIOGRAFIA BÁSICA:
MANZI, F. Flash CS3 Professional - Criando Além da Animação - para
Windows 2ª Ed. São Paulo: Érica, 2008
MEDEIROS, F. ARAI, N. Flash 8 Professional - Fundamentos e Aplicações Para Windows - 3ª Ed. São Paulo: Érica, 2007
BIBLIOGRAFIA COMPLEMENTAR:
ADOBE CREATIVE TEAM - Adobe Flash CS3 Professional: Classroom in a
Book - Guia Oficial de Treinamento, São Paulo: ArtMed, 2008
APOSTILA FLASH CS3/4 BÁSICO E AVANÇADO. - Pasta professor Luciano
Rocha - Fotocópia.
7
Animações Web
A tecnologia
Adobe Flash
8
A tecnologia Flash
As animações para web eram feitas principalmente com o uso de
GIFs animadas.
Em dezembro de 1996 a Macromedia adquiriu um software
chamado Future Splash Animator e lança-o com o nome de Flash.
Desde então foram lançadas 9 versões sendo que em 2005 a Adobe
Systems divulga a aquisição da Macromedia em uma transação de
3,4 bilhões de dólares que resulta no lançamento do Adobe Flash
CS3.
Em setembro de 2008 é lançada a versão CS4 com significativas
melhorias na interface do aplicativo e com o lançamento de novas
ferramentas de animação.
Em maio de 2010 a Adobe divulgou a versão CS5 com melhoras
principalmente nas ferramentas de programação.
Em maio de 2011 foi lançada a versão CS5.5 com novas ferramentas
para desenvolvimento de aplicações móveis.
9
O que é Adobe Flash?
É a tecnologia padrão da indústria para a criação interativa e
criação de experiências imersivas, desenvolvimento multimídia e
produção de Aplicações Ricas para Internet.
É um software primariamente de gráfico vetorial - apesar de
suportar imagens bitmap e vídeos - utilizado geralmente
para a criação de animações interativas que funcionam
embutidas num navegador web.
Utiliza o conceito “cross-plataform” (WORA) que propõe se
apresentar de forma consistente em todos os computadores
navegadores, dispositivos móveis e telas de virtualmente
qualquer tamanho e resolução.
10
Principais aplicações
Hoje a tecnologia Flash está presente em:
–
–
–
–
–
–
Computadores domésticos e comerciais;
Celulares;
Palmtops;
Pocket pcs;
Eletroeletrônicos e eletrodomésticos;
TVs, tvs por assinatura, DVDs, etc.
11
Produtos desenvolvidos
Websites;
Apresentações;Mídias móveis;
Jogos;
Aplicativos;
Sistemas;
Interfaces interativas;
Aplicações RIA (Rich Internet Application)
12
Principais Aplicações
Desenvolvimento
Jogos
Design
Multimídia
Jogos
Mobile
13
Como o Flash funciona?
A aplicação é criada no ambiente de desenvolvimento Adobe Flash
Professional e salvo com a extensão .fla (Arquivo de projeto).
O projeto é compilado (swf) e embutido na página por meio de tags html.
Para que o arquivo swf seja executado é necessário o plugin Adobe®
Flash® Player.
O Adobe® Flash® Player é um runtime de aplicativo baseado em
navegador entre plataformas que oferece a exibição do conteúdo Flash
de maneira isenta de aplicativos, sistemas operacionais, telas e
navegadores.
Atualmente encontra-se na versão 10.1 que foi desenvolvido para
aproveitar os recursos de dispositivo nativo, permitindo experiências de
usuário mais avançadas e mais interativas.
14
O futuro do Flash
Recentemente tem havido um aumento na discussão
sobre a tecnologia Adobe® Flash® e no âmbito dessa
discussão, uma quantidade razoável de informações
incorretas têm sido reportadas.
15
A verdade sobre o Flash
Alguns equívocos ao comparar Flash com Html5:
Vídeo
Desempenho
Segurança
Abertura
O H.264 é um codec de vídeo (o que requer um player)
todo conteúdo dinâmico requer mais capacidade de
processamento do que documentos HTML estáticos
Segundo o Symantec Global Internet Threat Report de 2009 o Flash
Player apresentou o segundo menor número de vulnerabilidades
entre todas as tecnologias de Internet listadas.
O mecanismo principal do Flash Player (AVM+) é uma fonte aberta
e foi doado à Mozilla Foundation onde é ativamente mantido.
Formatos SWF, FLV/F4V e os protocolos RTMP e AMF são
disponibilizados livremente e abertamente publicados.
16
h,p://www.adobe.com/br/choice/flash.html
Animações Web
Conceitos
Fundamentais
17
Conceito de Mídia
Media ou Mídia é um vocábulo latino que em português
significa meios.
É um termo utilizado em comunicação e pode apresentar
vários significados:
– Os meios de comunicação.
– Os veículos de comunicação.
– A área da publicidade responsável pela veiculação de
anúncios.
– O suporte ou dispositivos no qual pode se registrar a
informação digital.
As mídias podem ser agrupadas em cinco itens básicos:
texto - som - imagem - animação - vídeo
18
Multimídia: O que é?
CONCEITO 1:
É a combinação, controlada por computador, de
pelo menos um tipo de mídia estática (texto,
fotografia, gráfico), com pelo menos um tipo de mídia
dinâmica (vídeo, áudio, animação)
(Chapman & Chapman 2000 e Fluckiger 1995).
CONCEITO 2:
Corresponde a sistemas computacionais onde a
comunicação entre o homem e o computador pode
ser feita por meio de diversos modos de
representação da informação.
19
Classificação das mídias
Tipos de media:
– Quanto à natureza espaço-temporal
– Quanto à origem
– Quanto à interação
– Quanto à divulgação
20
Quanto à natureza espaço-temporal
Estáticos - Agrupam elementos de informação
independentes do tempo, alterando apenas a
sua dimensão no espaço, tais como, textos e
gráficos;
Dinâmicos - Agrupam elementos de informação
dependentes do tempo, como por exemplo, o
áudio e a animação. Nestes casos, uma
alteração, no tempo, da ordem de apresentação
dos conteúdos conduz a alterações na
informação associada ao respectivo tipo de mídia
dinâmico.
Imersivo - Agrupam elementos de informação
interativa em ambientes 3D.
21
Quanto à origem
Capturados - São aqueles que resultam de uma
recolha do exterior para o computador;
Sintetizados - São aqueles que são produzidos
pelo próprio computador através da utilização de
hardware e software específicos.
22
Quanto à interação
Linear - Na multimídia linear o usuário não tem
qualquer tipo de controle no desenrolar do
processo;
Não-linear - A multimídia não-linear oferece
interatividade com o usuário.
23
Quanto à divulgação
Quanto ao modo de divulgação podemos
encontrar dois tipos:
• Online - Divulgação online significa a disponibilidade de
uso imediato dos conteúdos. Pode ser efetuada, por
exemplo, através da utilização de uma rede informática
local ou da WWW.
• Offline - A divulgação offline de conteúdos multimídia é
efetuada através da utilização de suportes de
armazenamento, na maioria das vezes do tipo digital.
Neste caso, os suportes de armazenamento mais utilizados
são do tipo óptico, como o CD e DVD.
24
Aplicação multimídia
É apresentação ou recuperação da informação
de maneira multissensorial, ou seja quando mais
de um sentido humano está envolvido no
processo.
Os três níveis de percepção na comunicação
humana segundo a neurolinguística:
VISUAL - AUDITIVO - CINESTÉSICO
25