anim_web_A1

8/2/2019 anim_web_A1

1/25

ANIMAES WEB

AULA 1professor Luciano Roberto Rocha

www.lrocha.com

estrutura do curso e conceitos fundamentais
http://www.lrocha.com/http://www.lrocha.com/http://www.lrocha.com/http://www.lrocha.com/


2/25

Sobre o docente

Especialista em Desenvolvimento Web (UEM)

Mestre em Tecnologia Educacional (UFPR)

Doutorando em Educao - TICs (UFPR)

Diretor do departamento de desenvolvimento Web daSecretaria de Educao Castro

Consultor em TI da Unio Nacional dos Dirigentes emEducao - UNDIME (Braslia)

Consultor em Tecnologia Educacional do Instituto Dll

Instrutor Certificado Adobe System Incorporated (ACE/ACI)

2


3/25

Contedo programtico

Conceitos: Mdia, Tipos de Mdia.

Classificao das Mdias, Multimdia, Aplicaes Multimdia.

A interface do Ambiente de Desenvolvimento.

Criao de Elementos Grficos (Criao de mdia vetorial, layers,organizao de layers em folders, uso das ferramentas de desenho vetorial,bibliotecas, mscaras, importao de imagens).

Desenvolvendo Animaes (frame-a-frame, tweening motion, motion guidelayer, tweening shape Morph, efeitos de timelines).

Adicionando Interatividade (botes, behaviors, movieclips, mltiplas cenas)

Fundamentos do Rich Media (eventos, smbolos alinhados, Movieclips com

diferentes estgios, uso de timelines secundrias).Mdias udio e Vdeo (importao, behavios de udio, components de

vdeo).

Publicao e otimizao de arquivos para web, com HTML e gerao deexecutvel)

3


4/25

Competncias e habilidades

Analisar, projetar e desenvolver animaes

Aplicar tcnicas de animao, efeitos especiais,estilos de animao, trilhas sonoras

Aplicar tcnicas de reduo de arquivo paraWeb

Desenvolver e utilizar tcnicas de animao

Compreender e elaborar layouts complexos

Compreender e desenvolver personagens

4


5/25

Procedimentos didticos

Exposio/Debate/Dilogo sobre contedoproposto no plano de curso.

Realizao de exerccios prticos com o auxlio

do laboratrio de informtica para aplicao eutilizao das diversas tcnicas de animao edesenvolvimento multimdia .

Desenvolvimento de dinmicas em grupos eestudo de casos pertinentes disciplina.

5


6/25

Sistemtica de avaliao

Duas avaliaes parciais, tericas do contedoministrado em sala de aula com exerccios equestes objetivas e/ou descritivas com peso de

3 pontos.Duas avaliaes bimestrais, tericas ou prticas

dos conhecimentos trabalhados em sala de aulapor meio do desenvolvimento de exerccios deimplementao e apl icao dos temaspertinentes a disciplina com peso de 7 pontos.

6


7/25

Referencial terico

BIBLIOGRAFIA BSICA:MANZI, F. Flash CS3 Professional - Criando Alm da Animao - para

Windows 2 Ed. So Paulo: rica, 2008

MEDEIROS, F. ARAI, N. Flash 8 Professional - Fundamentos e Aplicaes -

Para Windows - 3 Ed. So Paulo: rica, 2007

BIBLIOGRAFIA COMPLEMENTAR:ADOBE CREATIVE TEAM - Adobe Flash CS3 Professional: Classroom in a

Book - Guia Oficial de Treinamento, So Paulo: ArtMed, 2008

APOSTILA FLASH CS3/4 BSICO E AVANADO. - Pasta professor LucianoRocha - Fotocpia.

7


8/25

Animaes Web

8

A tecnologia

Adobe Flash


9/25

A tecnologia Flash

As animaes para web eram feitas principalmente com o uso deGIFs animadas.

Em dezembro de 1996 a Macromedia adquiriu um softwarechamado Future Splash Animatore lana-o com o nome de Flash.

Desde ento foram lanadas 9 verses sendo que em 2005 a AdobeSystems divulga a aquisio da Macromedia em uma transao de3,4 bilhes de dlares que resulta no lanamento do Adobe FlashCS3.

Em setembro de 2008 lanada a verso CS4 com significativasmelhorias na interface do aplicativo e com o lanamento de novasferramentas de animao.

Em maio de 2010 a Adobe divulgou a verso CS5 com melhorasprincipalmente nas ferramentas de programao.

Em maio de 2011 foi lanada a verso CS5.5 com novas ferramentas

para desenvolvimento de aplicaes mveis. 9


10/25

O que Adobe Flash?

a tecnologia padro da indstria para a criao interativa ecriao de experincias imersivas, desenvolvimento multimdia eproduo de Aplicaes Ricas para Internet.

um software primariamente de grfico vetorial - apesar desuportar imagens bitmap e vdeos - utilizado geralmentepara a criao de animaes interativas que funcionamembutidas num navegador web.

Utiliza o conceito cross-plataform (WORA) que prope seapresentar de forma consistente em todos os computadoresnavegadores, dispositivos mveis e telas de virtualmentequalquer tamanho e resoluo.

10


11/25

Principais aplicaes

Hoje a tecnologia Flash est presente em:

Computadores domsticos e comerciais;

Celulares; Palmtops; Pocket pcs;

Eletroeletrnicos e eletrodomsticos; TVs, tvs por assinatura, DVDs, etc.

11


12/25

Produtos desenvolvidos

Websites;

Apresentaes;Mdias mveis;

Jogos;Aplicativos;

Sistemas;

Interfaces interativas;

Aplicaes RIA (Rich Internet Application)

12


13/25

Principais Aplicaes

13

Design

Desenvolvimento

Multimdia

Jogos

Mobile


14/25

Como o Flash funciona?

A aplicao criada no ambiente de desenvolvimento Adobe FlashProfessional e salvo com a extenso .fla (Arquivo de projeto).

O projeto compilado (swf) e embutido na pgina por meio de tags html.

Para que o arquivo swf seja executado necessrio o plugin AdobeFlash Player.

O Adobe Flash Player um runtime de aplicativo baseado emnavegador entre plataformas que oferece a exibio do contedo Flashde maneira isenta de aplicativos, sistemas operacionais, telas e

navegadores.

Atualmente encontra-se na verso 10.1 que foi desenvolvido paraaproveitar os recursos de dispositivo nativo, permitindo experincias deusurio mais avanadas e mais interativas.

14


15/25

O futuro do Flash

15

Recentemente tem havido um aumento na discussosobre a tecnologia Adobe Flash e no mbito dessadiscusso, uma quantidade razovel de informaesincorretas tm sido reportadas.


16/25

A verdade sobre o Flash

16

Vdeo

Desempenho

Segurana

Abertura

O H.264 um codec de vdeo (o que requer um player)

todo contedo dinmico requer mais capacidade deprocessamento do que documentos HTML estticos

Segundo o Symantec Global Internet Threat Report de 2009 o Flash

Player apresentou o segundo menor nmero 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 so

disponibilizados livremente e abertamente publicados.

Alguns equvocos ao comparar Flash com Html5:

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


17/25

Animaes Web

17

Conceitos

Fundamentais
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


18/25

Conceito de Mdia

Media ou Mdia um vocbulo latino que em portugussignifica meios.

um termo utilizado em comunicao e pode apresentarvrios significados:

Os meios de comunicao. Os veculos de comunicao.

A rea da publicidade responsvel pela veiculao deanncios.

O suporte ou dispositivos no qual pode se registrar ainformao digital.

As mdias podem ser agrupadas em cinco itens bsicos:

texto - som - imagem - animao - vdeo18
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


19/25

Multimdia: O que ?

CONCEITO 1:

a combinao, controlada por computador, depelo menos um tipo de mdia esttica (texto,fotografia, grfico), com pelo menos um tipo de mdia

dinmica (vdeo, udio, animao)(Chapman & Chapman 2000 e Fluckiger 1995).

CONCEITO 2:

Corresponde a sistemas computacionais onde acomunicao entre o homem e o computador podeser feita por meio de diversos modos derepresentao da informao.

19
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


20/25

Classificao das mdias

Tipos de media:

Quanto natureza espao-temporal

Quanto origem

Quanto interao

Quanto divulgao

20
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


21/25

Quanto natureza espao-temporal

Estticos - Agrupam elementos de informaoindependentes do tempo, alterando apenas asua dimenso no espao, tais como, textos egrficos;

Dinmicos - Agrupam elementos de informaodependentes do tempo, como por exemplo, oudio e a animao. Nestes casos, umaalterao, no tempo, da ordem de apresentaodos contedos conduz a alteraes nainformao associada ao respectivo tipo de mdiadinmico.

Imersivo - Agrupam elementos de informaointerativa em ambientes 3D.

21
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


22/25

Quanto origem

Capturados - So aqueles que resultam de umarecolha do exterior para o computador;

Sintetizados - So aqueles que so produzidospelo prprio computador atravs da utilizao dehardware e software especficos.

22
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


23/25

Quanto interao

Linear - Na multimdia linear o usurio no temqualquer tipo de controle no desenrolar doprocesso;

No-linear - A multimdia no-linear ofereceinteratividade com o usurio.

23
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


24/25

Quanto divulgao

Quanto ao modo de divulgao podemosencontrar dois tipos:

Online - Divulgao online significa a disponibilidade de

uso imediato dos contedos. Pode ser efetuada, porexemplo, atravs da utilizao de uma rede informticalocal ou da WWW.

Offline - A divulgao offline de contedos multimdia efetuada atravs da utilizao de suportes dearmazenamento, na maioria das vezes do tipo digital.Neste caso, os suportes de armazenamento mais utilizadosso do tipo ptico, como o CD e DVD.

24
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.html


25/25

Aplicao multimdia

apresentao ou recuperao da informaode maneira multissensorial, ou seja quando maisde um sentido humano est envolvido no

processo.

Os trs nveis de percepo na comunicaohumana segundo a neurolingustica:

VISUAL - AUDITIVO - CINESTSICO

25
http://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://www.adobe.com/br/choice/flash.htmlhttp://keynote/Users/lucianorocha/Documents/AULAS/flash/ilusoes_testes.keyhttp://keynote/Users/lucianorocha/Documents/AULAS/flash/ilusoes_testes.keyhttp://keynote/Users/lucianorocha/Documents/AULAS/flash/ilusoes_testes.key

anim_web_A1

Documents

Transcript of anim_web_A1