ANIMAÇÕES WEB

AULA 1

professor Luciano Roberto Rocha

www.lrocha.com

estrutura do curso e conceitos fundamentais

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 apl icaçã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

8

A tecnologia Adobe Flash

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

13

Design

Desenvolvimento

Multimídia

JogosMobile

Jogos

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

15

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.

A verdade sobre o Flash

16

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.

Alguns equívocos ao comparar Flash com Html5:

h,p://www.adobe.com/br/choice/flash.html

Animações Web

17

Conceitos Fundamentais

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ídeo18

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