Técnicas€de€Multimédia
Professor:€João€José€Leal
Agrupamento€de€Escolas€de€Tondela
Ano€Lectivo 2013/2014
- Módulo€3:€Anima...
2www.joaoleal.net/elearning Professor: João José Leal
Imagem bitmap: formada por pixéis (mais pesada e ao ser redimensiona...
3www.joaoleal.net/elearning Professor: João José Leal
Animação refere-se ao processo segundo o qual, cada fotograma de um ...
4www.joaoleal.net/elearning Professor: João José Leal
De facto não há qualquer movimento na animação. Trata-se sim de imag...
5www.joaoleal.net/elearning Professor: João José Leal
Para perceber como isto acontece temos de entender três fenómenos qu...
6www.joaoleal.net/elearning Professor: João José Leal
Sempre que olhamos para uma imagem, esta é
projectada na nossa retin...
7www.joaoleal.net/elearning Professor: João José Leal
8www.joaoleal.net/elearning Professor: João José Leal
9www.joaoleal.net/elearning Professor: João José Leal
O fenómeno Phi ilude movimento ao observador, quando lhe são exibida...
10www.joaoleal.net/elearning Professor: João José Leal
Com a invenção da película de cinema e da projecção de imagens em m...
11www.joaoleal.net/elearning Professor: João José Leal
O Flash é uma aplicação multimédia que permite criar desde simples
...
12www.joaoleal.net/elearning Professor: João José Leal
Interface
13www.joaoleal.net/elearning Professor: João José Leal
Toolbar (Barra de Ferramentas)
14www.joaoleal.net/elearning Professor: João José Leal
Organiza e distribui conteúdo de um filme segmentando esta informaç...
15www.joaoleal.net/elearning Professor: João José Leal
Modos de visualização da área de trabalho.
Selector Worplace
16www.joaoleal.net/elearning Professor: João José Leal
Painéis
Ferramentas opcionais.
17www.joaoleal.net/elearning Professor: João José Leal
Painéis
Ficheiros abertos (*.FLA).
18www.joaoleal.net/elearning Professor: João José Leal
Área rectangular onde se coloca todo o conteúdo gráfico do filme. A...
19www.joaoleal.net/elearning Professor: João José Leal
Painéis
Área de painéis personalizável que pode conter qualquer pai...
20www.joaoleal.net/elearning Professor: João José Leal
Este painel é contextual, exibe os atributos mais comuns do element...
21www.joaoleal.net/elearning Professor: João José Leal
Library (Biblioteca)
Armazena e organiza qualquer componente a inte...
22www.joaoleal.net/elearning Professor: João José Leal
O Flash usa vários formatos de ficheiro com funções específicas par...
23www.joaoleal.net/elearning Professor: João José Leal
.FLV e .F4V Ficheiros de vídeo reprodutíveis através do FlashPlayer...
24www.joaoleal.net/elearning Professor: João José Leal
As aplicações desenvolvidas em Flash podem ser filmes, aplicações
i...
25www.joaoleal.net/elearning Professor: João José Leal
Funcionamento dos Ficheiros Flash
Flash
Player
Plugin
Criar um
fich...
26www.joaoleal.net/elearning Professor: João José Leal
• Adobe Illustrador (.ai)
• Adobe Photoshop (.psd)
• Autocad DXF (....
27www.joaoleal.net/elearning Professor: João José Leal
ActionScript (AS) é o termo que designa a linguagem subjacente à
pr...
28www.joaoleal.net/elearning Professor: João José Leal
A sintaxe e os recursos do AS têm muitas semelhanças com a linguage...
29www.joaoleal.net/elearning Professor: João José Leal
O ActionScript é a linguagem de programação dos ambientes de
tempo ...
30www.joaoleal.net/elearning Professor: João José Leal
O ActionScript é executado com a AVM (ActionScript Virtual
Machine)...
31www.joaoleal.net/elearning Professor: João José Leal
O AS 3.0 nasceu da necessidade de conseguir ter uma melhor
performa...
32www.joaoleal.net/elearning Professor: João José Leal
O AS 3.0 oferece um modelo de programação robusto familiar a
quem t...
33www.joaoleal.net/elearning Professor: João José Leal
• Uma API (Interface de programação de aplicativo) expandida e apri...
34www.joaoleal.net/elearning Professor: João José Leal
O grande ponto forte do AS 3.0 é que este é essencialmente focado
e...
35www.joaoleal.net/elearning Professor: João José Leal
Um dos grandes problemas que se apresentam ao
programar em AS 3.0 é...
36www.joaoleal.net/elearning Professor: João José Leal
Na versão AS 2.0 esta declaração era opcional, pelo que uma
simples...
37www.joaoleal.net/elearning Professor: João José Leal
Uma clássica estrutura de Objectos e da sua Linguagem Orientada, é
...
38www.joaoleal.net/elearning Professor: João José Leal
Transportes como objecto principal, dentro dele podemos ter
Carro, ...
39www.joaoleal.net/elearning Professor: João José Leal
O processo de dividir o código por pequenas instâncias chama-se
"En...
40www.joaoleal.net/elearning Professor: João José Leal
O melhor destes aspectos do AS3 é que o código tem
uma facilidade e...
41www.joaoleal.net/elearning Professor: João José Leal
O AS2 foi estabilizado durante bastante tempo, mas a
crescente nece...
42www.joaoleal.net/elearning Professor: João José Leal
De€forma€geral€o€AS3€é€executado€de€Cima€para€Baixo€e€linearmente€
...
43www.joaoleal.net/elearning Professor: João José Leal
Existem alguns argumentos que podem alterar esta ordem, mas as
base...
44www.joaoleal.net/elearning Professor: João José Leal
O uso oficial do ; serve para executar mais que uma instrução numa
...
45www.joaoleal.net/elearning Professor: João José Leal
O trace como em muitas linguagens é muito útil no caso de debug,
pa...
46www.joaoleal.net/elearning Professor: João José Leal
As variáveis AS3, tais como as variáveis de outras linguagens de
pr...
Upcoming SlideShare
Loading in …5
×

Apresentação AE Tondela (mod 3 animação 2D)

690 views
624 views

Published on

Módulo 3 (Animação 2D)

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
690
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Apresentação AE Tondela (mod 3 animação 2D)

  1. 1. Técnicas€de€Multimédia Professor:€João€José€Leal Agrupamento€de€Escolas€de€Tondela Ano€Lectivo 2013/2014 - Módulo€3:€Animação€2D€-
  2. 2. 2www.joaoleal.net/elearning Professor: João José Leal Imagem bitmap: formada por pixéis (mais pesada e ao ser redimensionada, perde qualidade). Imagem vectorial: composta por cálculos matemáticos (mais leve e ao ser redimensionada, não perde qualidade). Recapitulando
  3. 3. 3www.joaoleal.net/elearning Professor: João José Leal Animação refere-se ao processo segundo o qual, cada fotograma de um filme é produzido individualmente, podendo ser gerado quer por computação gráfica quer fotografando uma imagem desenhada quer repetidamente fazendo-se pequenas mudanças a um modelo (stopmotion), fotografando o resultado. Quando os fotogramas são ligados entre si e o filme resultante é visto a uma velocidade de 12 ou mais imagens por segundo (normalmente em animação usam-se as 24 imagens por segundo embora repetidas duas a duas) , há uma ilusão de movimento contínuo. Wikipedia O que é animação ?
  4. 4. 4www.joaoleal.net/elearning Professor: João José Leal De facto não há qualquer movimento na animação. Trata-se sim de imagens paradas! Somos nós com a nossa visão e cérebro, que processamos a informação fornecida por essas imagens, quando apresentadas de uma forma sucessiva, de determinada maneira que nos causa a ilusão de movimento. Ilusão de movimento
  5. 5. 5www.joaoleal.net/elearning Professor: João José Leal Para perceber como isto acontece temos de entender três fenómenos que permitem essa ilusão. - Persistência retiniana da visão - Fenómeno psicológico “Phi” - Efeito estroboscópico Ilusão de movimento
  6. 6. 6www.joaoleal.net/elearning Professor: João José Leal Sempre que olhamos para uma imagem, esta é projectada na nossa retina. Quando essa imagem é-nos “retirada da frente”, essa projecção permanece por uma fracção de segundo na retina, “enganando” o nosso cérebro, que continua a processá-la até se “apagar” completamente. Persistência retiniana da visão
  7. 7. 7www.joaoleal.net/elearning Professor: João José Leal
  8. 8. 8www.joaoleal.net/elearning Professor: João José Leal
  9. 9. 9www.joaoleal.net/elearning Professor: João José Leal O fenómeno Phi ilude movimento ao observador, quando lhe são exibidas duas imagens sucessivamente (por exemplo uma bola em abaixo e outra acima num ecrã). O observador normalmente dirá que houve um movimento entre as duas bolas (no espaço entre ambas) e nos extremos do ecrã (na posição da primeira bola e depois da segunda). O observador dirá que viu a bola a saltitar. Exemplo: Fenómeno psicológico “Phi” (descrito pelo Psicólogo Max Wertheimer num trabalho seu de 1912: Estudos experimentais na observação do movimento)
  10. 10. 10www.joaoleal.net/elearning Professor: João José Leal Com a invenção da película de cinema e da projecção de imagens em movimento, para não vermos as imagens a passar rapidamente à nossa frente deslizando no ecrã (criando apenas um mesclado de riscos) houve necessidade de criar um mecanismo que nos fizesse apenas ver as imagens quando estas estão na posição certa no meio do ecrã. Recorreu-se assim ao efeito estroboscópico, esse efeito é conseguido através da alternância entre a iluminação com uma luz intensa e o bloqueamento dessa luz com um diafragma, fazendo coincidir a frequência da iluminação com a do movimento, cada feixe de luz ilumina a mesma fase do movimento. Efeito estroboscópico
  11. 11. 11www.joaoleal.net/elearning Professor: João José Leal O Flash é uma aplicação multimédia que permite criar desde simples animações até aplicações complexas com a capacidade de articular elementos de naturezas distintas como texto, imagem, som e vídeo, adicionando ainda todo o potencial de interacção com o utilizador. O Flash utiliza como imagens nativas imagens vectoriais, que são constituídas por um conjunto de pontos (designados nodes, ou nós) que definem segmentos. Flash
  12. 12. 12www.joaoleal.net/elearning Professor: João José Leal Interface
  13. 13. 13www.joaoleal.net/elearning Professor: João José Leal Toolbar (Barra de Ferramentas)
  14. 14. 14www.joaoleal.net/elearning Professor: João José Leal Organiza e distribui conteúdo de um filme segmentando esta informação por layers (camadas) e frames (quadros). Os principais componentes do timeline são os layers, os frames e a playhead (Agulha/ponto de reprodução), que identifica o momento actual de reprodução. Timeline
  15. 15. 15www.joaoleal.net/elearning Professor: João José Leal Modos de visualização da área de trabalho. Selector Worplace
  16. 16. 16www.joaoleal.net/elearning Professor: João José Leal Painéis Ferramentas opcionais.
  17. 17. 17www.joaoleal.net/elearning Professor: João José Leal Painéis Ficheiros abertos (*.FLA).
  18. 18. 18www.joaoleal.net/elearning Professor: João José Leal Área rectangular onde se coloca todo o conteúdo gráfico do filme. A composição no stage corresponde ao resultado final do filme Flash que será visualizado numa janela ou na janela do browser. Stage (Palco)
  19. 19. 19www.joaoleal.net/elearning Professor: João José Leal Painéis Área de painéis personalizável que pode conter qualquer painel do menu Window. Ficam dispostos em separadores.
  20. 20. 20www.joaoleal.net/elearning Professor: João José Leal Este painel é contextual, exibe os atributos mais comuns do elemento activo, esteja no Stage (Palco) ou Timeline (Linha do tempo). Dependendo do elemento seleccionado exibe informação e configurações do documento, texto, símbolo, forma, bitmap, vídeo, grupo, frame ou ferramenta actual. Properties
  21. 21. 21www.joaoleal.net/elearning Professor: João José Leal Library (Biblioteca) Armazena e organiza qualquer componente a integrar no documento (símbolos do Flash ou bitmaps, sons e vídeos externos).
  22. 22. 22www.joaoleal.net/elearning Professor: João José Leal O Flash usa vários formatos de ficheiro com funções específicas para a aplicação: Ficheiros de trabalho que correspondem ao projecto propriamente dito. São editáveis a partir da aplicação principal e que não estão prontos a ser reproduzidos até serem compilados. .FLA .SWF Ficheiros resultantes da compilação de um ficheiro FLA. Podem conter simples animações ou aplicações interactivas complexas. São reproduzidos através do FlashPlayer. Formatos de Ficheiros no Flash
  23. 23. 23www.joaoleal.net/elearning Professor: João José Leal .FLV e .F4V Ficheiros de vídeo reprodutíveis através do FlashPlayer. Contrariamente aos ficheiros SWF, são apenas vídeos e não têm interacção. .AS Ficheiros com código ActionScript interactivo usado para controlar aplicações do Flash.
  24. 24. 24www.joaoleal.net/elearning Professor: João José Leal As aplicações desenvolvidas em Flash podem ser filmes, aplicações interactivas a funcionar de forma autónoma (através de ficheiros executáveis) ou então nas aplicações para a web. Qualquer aplicação Flash para a web resulta num ficheiro SWF que terá que ser embebido numa página HTML (processo feito através da opção Publish – Publicar). Funcionamento dos Ficheiros Flash
  25. 25. 25www.joaoleal.net/elearning Professor: João José Leal Funcionamento dos Ficheiros Flash Flash Player Plugin Criar um ficheiro .fla Publicar um ficheiro .swf Embeber em pág. HTML Servidor Web Browser Web <HTML> <HEAD> <TITLE>Título</TITLE> </HEAD> <BODY> <EMBED src="teste.swf"></EMBED> </BODY> </HTML> Pedido HTTP Resposta HTTP 1 2 3 4
  26. 26. 26www.joaoleal.net/elearning Professor: João José Leal • Adobe Illustrador (.ai) • Adobe Photoshop (.psd) • Autocad DXF (.dxf) • Bitmap (.bmp) • EWM (.emf) 3 • Freehand (.fh7 até .fh11) • FutureSplashPlayer (.spl) • GIF e Gif animado (.gif) • JPEG (.jpg) • Flash Player 6/7 (.swf) • Windows Metafile (.wmf) • MacPaint (.pntg) 2 • PICT (.pct, .pic) 1 • Quicktime Image (.qtif) 2 • Silicon Graphics Image (.sgi) 2 • TGA (.tga) 2 • TIFF (.tif) 2 O Flash CS4, CS5 e CS6 permite importar elementos de outras aplicações e com naturezas distintas; é possível importar ficheiros do Freehand e do Fireworks (PNG) preservando as propriedades destes formatos. Importar ficheiros externos
  27. 27. 27www.joaoleal.net/elearning Professor: João José Leal ActionScript (AS) é o termo que designa a linguagem subjacente à programação no Flash. O Flash combina várias expressões que mais não são do que um conjunto de instruções (linha de código) com maior ou menor complexidade e a que damos o nome de Scripts. Estas instruções definem o comportamento do filme e de toda a acção inerente. As linhas de código pertencem a uma determinada sintaxe, obedecendo assim a regras formais que, por sua vez, irão validar o processamento da informação. ActionScript
  28. 28. 28www.joaoleal.net/elearning Professor: João José Leal A sintaxe e os recursos do AS têm muitas semelhanças com a linguagem JavaScript. Porém, existem algumas diferenças, tais como: • Não existe um suporte pleno no AS no que diz respeito aos objectos intrínsecos do JavaScript; • Os objectos Document, Window e Anchor, específicos dos browsers não são suportados pelo AS; • A execução da acção eval no AS incide apenas nas referências de variáveis.
  29. 29. 29www.joaoleal.net/elearning Professor: João José Leal O ActionScript é a linguagem de programação dos ambientes de tempo de execução Adobe® Flash® Player e Adobe® AIR™. Ele permite interactividade, manipulação de dados e muito mais no conteúdo e nos aplicativos do Flash, Flex e AIR.
  30. 30. 30www.joaoleal.net/elearning Professor: João José Leal O ActionScript é executado com a AVM (ActionScript Virtual Machine), que faz parte do Flash Player e do AIR. O código do ActionScript em geral é compilado no formato de código de bytes (um tipo de linguagem de programação escrita e entendida por computadores) por um compilador, como o criado no Adobe® Flash® CS4 Professional ou no Adobe® Flex™Builder™ou como o disponível no Adobe® Flex™SDK. O código de bytes é incorporado aos arquivos SWF, que são executados pelo Flash Player e pelo AIR.
  31. 31. 31www.joaoleal.net/elearning Professor: João José Leal O AS 3.0 nasceu da necessidade de conseguir ter uma melhor performance nas aplicações e animações flash. Era necessário implementar alterações de raiz no AS 2.0 para que este pudesse ter a performance do actual AS 3.0, por isso foi preferível quase que criar a linguagem de novo. A linguagem AS 3.0 é literalmente tratada à parte da AS 2.0 pela runtime do flash player, pelo que logo aí se pode concluir que são mesmo diferentes a nível de código e de performance. O que é o Action Script 3.0?
  32. 32. 32www.joaoleal.net/elearning Professor: João José Leal O AS 3.0 oferece um modelo de programação robusto familiar a quem tenha conhecimento básico de programação orientada a objectos. Alguns dos recursos principais do AS 3.0 que foram aprimorados em relação à versão anterior incluem: • Uma nova ActionScript Virtual Machine, chamada AVM2, que usa um novo conjunto de instruções de código de bytes e fornece aprimoramentos de desempenho significativos; • Uma base de código de compilador moderna que executa optimizações mais avançadas do que as versões anteriores do compilador;
  33. 33. 33www.joaoleal.net/elearning Professor: João José Leal • Uma API (Interface de programação de aplicativo) expandida e aprimorada, com controle de baixo nível de objectos e um autêntico modelo orientado a objectos; • Uma API XML baseada na especificação de linguagem ECMAScript para XML (E4X) (ECMA-357 edição 2) E4X é a extensão de linguagem para ECMAScript que adiciona XML como um tipo de dados nativo da linguagem; • Um modelo de evento baseado na Especificação de eventos DOM (Document Object Model) nível 3.
  34. 34. 34www.joaoleal.net/elearning Professor: João José Leal O grande ponto forte do AS 3.0 é que este é essencialmente focado em Programação Orientada a Objectos, e esta sua vertente torna tudo muito mais simples, rápido e organizado. Para os programadores AS 2.0 as coisas não serão muito fáceis, muito pelo facto de à primeira vista muitas coisas possam ser compreendidas e interpretadas como no AS 2.0. Pontos Fortes do Action Script 3.0
  35. 35. 35www.joaoleal.net/elearning Professor: João José Leal Um dos grandes problemas que se apresentam ao programar em AS 3.0 é a impossibilidade de programar usando AS 3.0 e AS 2.0 mutuamente pois são tratados de forma diferente pelo Flash Player. Uma grande diferença do AS3 é que este exige obrigatoriamente/es- tritamente a declaração de variáveis, argumentos, funções e os seus valores devolvidos, mesmo que a função não devolva nada ou devolva o argumento nulo. Problemas (???) do Action Script 3.0
  36. 36. 36www.joaoleal.net/elearning Professor: João José Leal Na versão AS 2.0 esta declaração era opcional, pelo que uma simples função: No AS 3.0, o primeiro método foi eliminado, pelo que todas as funções, argumentos e valores devolvidos (return's) têm que ser devidamente declarados. function olaMundo() {} funcionava€exactamente€igual€a€ function olaMundo():void {}
  37. 37. 37www.joaoleal.net/elearning Professor: João José Leal Uma clássica estrutura de Objectos e da sua Linguagem Orientada, é que podemos ter um objecto Principal (Collection), e depois as suas categorias internas (Classes), que por si são um conjunto de código. Vejamos com o seguinte exemplo:
  38. 38. 38www.joaoleal.net/elearning Professor: João José Leal Transportes como objecto principal, dentro dele podemos ter Carro, Avião, Moto e Autocarro e dentro de cada um destes temos os seus procedimentos, imaginemos: Transportes -> Carro -> Levo 5 pessoas -> Avião -> Levo 350 pessoas -> Moto -> Levo 2 Pessoas -> Autocarro -> Levo 50 Pessoas
  39. 39. 39www.joaoleal.net/elearning Professor: João José Leal O processo de dividir o código por pequenas instâncias chama-se "Encapsulation", que é uma das imagens de marca do AS 3.0. Poderemos ainda ter uma cadeia, no exemplo do carro: Transporte -> Carro -> Bancos da frente -> 2 Pessoas -> Bancos de trás -> 3 Pessoas Este processo chama-se inheritance, que é o processo de podermos implementar/extender uma das classes base, neste caso extendemos a class Carro do Objecto Transporte.
  40. 40. 40www.joaoleal.net/elearning Professor: João José Leal O melhor destes aspectos do AS3 é que o código tem uma facilidade enorme de ser interpretado, bem como reutilizado e partilhado. A nível do seu "core" o Action Script é baseado na linguagem ECMA-262 mais conhecida como ECMAScript que cresceu com o sucesso da sua linguagem mais conhecida, o Javascript.
  41. 41. 41www.joaoleal.net/elearning Professor: João José Leal O AS2 foi estabilizado durante bastante tempo, mas a crescente necessidade de melhorar e acompanhar as tendências do mercado e programadores, o AS3 foi reescrito do nada, contando com uma enorme possibilidade de expansão e quase "infinitas" características que acompanham as muitas linguagens de programação, temos por exemplo actualmente o suporte nativo a objectos e cenas 3D no futuro Flash Player 10, isto praticamente só possível devido à migração do AS2 para o AS3 do seu motor. Esta grande alteração do AS3 acrescenta inúmero pontos novos, mas as suas bases mantêm-se intactas.
  42. 42. 42www.joaoleal.net/elearning Professor: João José Leal De€forma€geral€o€AS3€é€executado€de€Cima€para€Baixo€e€linearmente€ da€esquerda€para€a€direita: passo€1€->€passo€2€->€passo€3 passo€4€->€passo€5 passo€6 Bases da Linguagem
  43. 43. 43www.joaoleal.net/elearning Professor: João José Leal Existem alguns argumentos que podem alterar esta ordem, mas as bases de execução são estas, esses elementos podem ser por exemplo a chamada de um passo diferente da ordem de execução, imaginemos: passo€1€->€passo€2€(chama€passo€6)€->€passo€3 passo€4€->€passo€5 passo€6€(termina€passo€6)€->€passo€7 Neste€caso€a€ordem€seria passo€1€->€passo€2€->€(passo€6)€->€passo€3 passo€4€->€passo€5 Isto em si não é difícil de entender, o passo 2 chama o passo 6 e interrompe a execução normal, só depois de o passo 6 executado é que a execução prossegue para o passo 3.
  44. 44. 44www.joaoleal.net/elearning Professor: João José Leal O uso oficial do ; serve para executar mais que uma instrução numa linha e também para indicar o final de uma linha de código. Esta indicação no final da linha, ao contrário do que se pensa não é obrigatória a sua inserção no final de cada linha, visto que não é disparado qualquer erro, mas por uma questão de organização e por facilidade de compreensão de outras linguagens. Uso do ponto e vírgula (semicolon) “;”
  45. 45. 45www.joaoleal.net/elearning Professor: João José Leal O trace como em muitas linguagens é muito útil no caso de debug, para obtermos valores de determinadas variáveis e funções. Este trace() coloca no painel output do flash o valor que lhe indicar-mos, no caso de trace("olá Mundo") aparecerá no painel de debug olá Mundo. Notem que no caso do Flex, necessitam de ter o plugin com o debugger instalado, caso contrário não conseguirão fazer o devido debug. Uso do Trace
  46. 46. 46www.joaoleal.net/elearning Professor: João José Leal As variáveis AS3, tais como as variáveis de outras linguagens de programação são usadas para guardar valores. As variáveis devem ser identificadas como únicas e que não interfiram com os elementos da própria linguagem em si. Como por exemplo: minhaVariavel1 = 1; variav2 = 2; Um erro: var = 2; Este erro acontece porque o var é explicitamente usado pela linguagem de programação para, curiosamente, declarar variáveis. Variáveis e tipos de dados

×