Curso€de€Especialização€TecnológicaTecnologias€e€Programação€de€Sistemas€de€InformaçãoFerramentas€Multimédia              ...
RecapitulandoImagem vectorial: composta por cálculos matemáticos (mais leve e ao serredimensionada, não perde qualidade).I...
O que é animação ?Animação refere-se ao processo segundo o qual, cada fotograma de um filme éproduzido individualmente, po...
Ilusão de movimentoDe facto não há qualquer movimento na animação. Trata-se sim de imagens paradas!Somos nós com a nossa v...
Ilusão de movimento             Para perceber como isto acontece temos de entender três fenómenos quepermitem essa ilusão....
Persistência retiniana da visãoSempre que olhamos para uma imagem, esta éprojectada na nossa retina. Quando essaimagem é-n...
www.joaoleal.net   Formador: João José Leal   7
www.joaoleal.net   Formador: João José Leal   8
Fenómeno psicológico “Phi”(descrito pelo Psicólogo Max Wertheimer num trabalho seu de 1912: Estudos experimentais na obser...
Efeito estroboscópicoCom a invenção da película de cinema e da projecção de imagens em movimento, paranão vermos as imagen...
Flash               O Flash é uma aplicação multimédia que permite criar desde simplesanimações até aplicações complexas c...
Interfacewww.joaoleal.net   Formador: João José Leal   12
Toolbar (Barra de Ferramentas) www.joaoleal.net   Formador: João José Leal   13
TimelineOrganiza e distribui conteúdo de um filme segmentando esta informação por layers(camadas) e frames (quadros). Os p...
Selector WorplaceModos de visualização da área de trabalho.www.joaoleal.net                Formador: João José Leal   15
PainéisFerramentas opcionais.www.joaoleal.net         Formador: João José Leal   16
PainéisFicheiros abertos (*.FLA).www.joaoleal.net             Formador: João José Leal   17
Stage (Palco)Área rectangular onde se coloca todo o conteúdo gráfico do filme. A composição nostage corresponde ao resulta...
Painéis               Área de painéis personalizável que pode conter qualquer painel do menuWindow. Ficam dispostos em sep...
Properties                  Este painel é contextual, exibe os atributos mais comuns do elementoactivo, esteja no Stage (P...
Library (Biblioteca)                     Armazena e organiza qualquer componente a integrar no documento(símbolos do Flash...
Formatos de Ficheiros no Flash                O Flash usa vários formatos de ficheiro com funções específicas para aaplica...
.FLV e .F4V             Ficheiros de vídeo reprodutíveis através do FlashPlayer. Contrariamente aos                       ...
Funcionamento dos Ficheiros Flash                    As aplicações desenvolvidas em Flash podem ser filmes, aplicaçõesinte...
Funcionamento dos Ficheiros Flash                    1               2                               3                    ...
Importar ficheiros externosO Flash CS4, CS5 e CS6 permite importar elementos de outras aplicações e comnaturezas distintas...
ActionScriptActionScript (AS) é o termo que designa a linguagem subjacente àprogramação no Flash.O Flash combina várias ex...
A sintaxe e os recursos do AS têm muitas semelhanças com a linguagemJavaScript. Porém, existem algumas diferenças, tais co...
O ActionScript é a linguagem de programação dos ambientes detempo de execução Adobe® Flash® Player e Adobe® AIR™.         ...
O ActionScript é executado com a AVM (ActionScript VirtualMachine), que faz parte do Flash Player e do AIR.               ...
O que é o Action Script 3.0?                 O AS 3.0 nasceu da necessidade de conseguir ter uma melhorperformance nas apl...
O AS 3.0 oferece um modelo de programação robusto familiar aquem tenha conhecimento básico de programação orientada a obje...
• Uma API (Interface de programação de aplicativo) expandida e aprimorada,com controle de baixo nível de objectos e um aut...
Pontos Fortes do Action Script 3.0               O grande ponto forte do AS 3.0 é que este é essencialmente focadoem Progr...
Problemas (???) do Action Script 3.0               Um     dos   grandes    problemas                 que   se   apresentam...
Na versão AS 2.0 esta declaração era opcional, pelo que umasimples função:                      function olaMundo() {}func...
Uma clássica estrutura de Objectos e da sua Linguagem Orientada, éque podemos ter um objecto              Principal (Colle...
Transportes como objecto principal, dentro dele podemos terCarro, Avião, Moto e Autocarro e dentro de cada um destes temos...
O processo de dividir o código por pequenas instâncias chama-se"Encapsulation", que é uma das imagens de marca do AS 3.0. ...
O melhor destes aspectos do AS3 é que o código temuma facilidade enorme de ser interpretado, bem como reutilizado epartilh...
O AS2 foi estabilizado durante bastante tempo, mas acrescente necessidade de melhorar e acompanhar as tendências domercado...
Bases da Linguagem        De€forma€geral€o€AS3€é€executado€de€Cima€para€Baixo€e€linearmente€da€esquerda€para€a€direita:   ...
Existem alguns argumentos que podem alterar esta ordem, mas asbases de execução são estas, esses elementos podem ser por e...
Uso do ponto e vírgula (semicolon) “;”               O uso oficial do ; serve para executar mais que uma instrução numalin...
Uso do Trace                 O trace como em muitas linguagens é muito útil no caso de debug,para obtermos valores de dete...
Variáveis e tipos de dados         As variáveis AS3, tais como as variáveis de outras linguagens deprogramação são usadas ...
Upcoming SlideShare
Loading in...5
×

Apresentação TPSI - ISEC (Animação)

2,295
-1

Published on

Apresentação TPSI - ISEC (Animação)

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

  • Be the first to like this

No Downloads
Views
Total Views
2,295
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Apresentação TPSI - ISEC (Animação)

  1. 1. Curso€de€Especialização€TecnológicaTecnologias€e€Programação€de€Sistemas€de€InformaçãoFerramentas€Multimédia Formador:€João€Leal
  2. 2. RecapitulandoImagem vectorial: composta por cálculos matemáticos (mais leve e ao serredimensionada, não perde qualidade).Imagem bitmap: formada por pixéis (mais pesada e ao ser redimensionada, perdequalidade). www.joaoleal.net Formador: João José Leal 2
  3. 3. O que é animação ?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 querfotografando uma imagem desenhada quer repetidamente fazendo-se pequenasmudanças a um modelo (stopmotion), fotografando o resultado. Quando os fotogramassão ligados entre si e o filme resultante é visto a uma velocidade de 12 ou maisimagens por segundo (normalmente em animação usam-se as 24 imagens por segundoembora repetidas duas a duas) , há uma ilusão de movimento contínuo. Wikipedia www.joaoleal.net Formador: João José Leal 3
  4. 4. Ilusão de movimentoDe 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 fornecidapor essas imagens, quando apresentadas de uma forma sucessiva, de determinadamaneira que nos causa a ilusão de movimento. www.joaoleal.net Formador: João José Leal 4
  5. 5. Ilusão de movimento Para perceber como isto acontece temos de entender três fenómenos quepermitem essa ilusão. - Persistência retiniana da visão - Fenómeno psicológico “Phi” - Efeito estroboscópico www.joaoleal.net Formador: João José Leal 5
  6. 6. Persistência retiniana da visãoSempre que olhamos para uma imagem, esta éprojectada na nossa retina. Quando essaimagem é-nos “retirada da frente”, essaprojecção permanece por uma fracção desegundo na retina, “enganando” o nossocérebro, que continua a processá-la até se“apagar” completamente. www.joaoleal.net Formador: João José Leal 6
  7. 7. www.joaoleal.net Formador: João José Leal 7
  8. 8. www.joaoleal.net Formador: João José Leal 8
  9. 9. Fenómeno psicológico “Phi”(descrito pelo Psicólogo Max Wertheimer num trabalho seu de 1912: Estudos experimentais na observação domovimento) 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: www.joaoleal.net Formador: João José Leal 9
  10. 10. Efeito estroboscópicoCom a invenção da película de cinema e da projecção de imagens em movimento, paranão vermos as imagens a passar rapidamente à nossa frente deslizando no ecrã(criando apenas um mesclado de riscos) houve necessidade de criar um mecanismo quenos fizesse apenas ver as imagens quando estas estão na posição certa no meio doecrã.Recorreu-se assim ao efeito estroboscópico, esse efeito é conseguido através daalternância entre a iluminação com uma luz intensa e o bloqueamento dessa luz com umdiafragma, fazendo coincidir a frequência da iluminação com a do movimento, cadafeixe de luz ilumina a mesma fase do movimento. www.joaoleal.net Formador: João José Leal 10
  11. 11. Flash O Flash é uma aplicação multimédia que permite criar desde simplesanimações até aplicações complexas com a capacidade de articular elementos denaturezas distintas como texto, imagem, som e vídeo, adicionando ainda todo opotencial de interacção com o utilizador. O Flash utiliza como imagens nativas imagens vectoriais, que sãoconstituídas por um conjunto de pontos (designados nodes, ou nós) que definemsegmentos. www.joaoleal.net Formador: João José Leal 11
  12. 12. Interfacewww.joaoleal.net Formador: João José Leal 12
  13. 13. Toolbar (Barra de Ferramentas) www.joaoleal.net Formador: João José Leal 13
  14. 14. TimelineOrganiza 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 actualde reprodução. www.joaoleal.net Formador: João José Leal 14
  15. 15. Selector WorplaceModos de visualização da área de trabalho.www.joaoleal.net Formador: João José Leal 15
  16. 16. PainéisFerramentas opcionais.www.joaoleal.net Formador: João José Leal 16
  17. 17. PainéisFicheiros abertos (*.FLA).www.joaoleal.net Formador: João José Leal 17
  18. 18. Stage (Palco)Área rectangular onde se coloca todo o conteúdo gráfico do filme. A composição nostage corresponde ao resultado final do filme Flash que será visualizado numa janelaou na janela do browser. www.joaoleal.net Formador: João José Leal 18
  19. 19. Painéis Área de painéis personalizável que pode conter qualquer painel do menuWindow. Ficam dispostos em separadores. www.joaoleal.net Formador: João José Leal 19
  20. 20. Properties Este painel é contextual, exibe os atributos mais comuns do elementoactivo, esteja no Stage (Palco) ou Timeline (Linha do tempo). Dependendo doelemento seleccionado exibe informação e configurações do documento, texto,símbolo, forma, bitmap, vídeo, grupo, frame ou ferramenta actual. www.joaoleal.net Formador: João José Leal 20
  21. 21. Library (Biblioteca) Armazena e organiza qualquer componente a integrar no documento(símbolos do Flash ou bitmaps, sons e vídeos externos). www.joaoleal.net Formador: João José Leal 21
  22. 22. Formatos de Ficheiros no Flash O Flash usa vários formatos de ficheiro com funções específicas para aaplicação: .FLA 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. .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. www.joaoleal.net Formador: João José Leal 22
  23. 23. .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.www.joaoleal.net Formador: João José Leal 23
  24. 24. Funcionamento dos Ficheiros Flash As aplicações desenvolvidas em Flash podem ser filmes, aplicaçõesinteractivas a funcionar de forma autónoma (através de ficheiros executáveis) ouentã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). www.joaoleal.net Formador: João José Leal 24
  25. 25. Funcionamento dos Ficheiros Flash 1 2 3 Publicar Criar um Embeber um ficheiro em pág. ficheiro .fla HTML .swf 4 Pedido HTTP Browser Servidor Web Resposta HTTP Web Flash <HTML> Player <HEAD> <TITLE>Título</TITLE> Plugin </HEAD> <BODY> <EMBED src="teste.swf"></EMBED> </BODY> </HTML> www.joaoleal.net Formador: João José Leal 25
  26. 26. Importar ficheiros externosO Flash CS4, CS5 e CS6 permite importar elementos de outras aplicações e comnaturezas distintas; é possível importar ficheiros do Freehand e do Fireworks(PNG) preservando as propriedades destes formatos.• Adobe Illustrador (.ai) • Flash Player 6/7 (.swf)• Adobe Photoshop (.psd) • Windows Metafile (.wmf)• Autocad DXF (.dxf) • MacPaint (.pntg) 2• Bitmap (.bmp) • PICT (.pct, .pic) 1• EWM (.emf) 3 • Quicktime Image (.qtif) 2• Freehand (.fh7 até .fh11) • Silicon Graphics Image (.sgi) 2• FutureSplashPlayer (.spl) • TGA (.tga) 2• GIF e Gif animado (.gif) • TIFF (.tif) 2• JPEG (.jpg) 1 Apenas em Macintosh ou como bitmap com o Quicktime instalado 2 Com o Quicktime 4 ou superior instalado 3 Apenas em Windows www.joaoleal.net Formador: João José Leal 26
  27. 27. ActionScriptActionScript (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 deinstruções (linha de código) com maior ou menor complexidade e a quedamos o nome de Scripts.Estas instruções definem o comportamento do filme e de toda a acçãoinerente. As linhas de código pertencem a uma determinada sintaxe,obedecendo assim a regras formais que, por sua vez, irão validar oprocessamento da informação. www.joaoleal.net Formador: João José Leal 27
  28. 28. A sintaxe e os recursos do AS têm muitas semelhanças com a linguagemJavaScript. 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. www.joaoleal.net Formador: João José Leal 28
  29. 29. O ActionScript é a linguagem de programação dos ambientes detempo de execução Adobe® Flash® Player e Adobe® AIR™. Ele permite interactividade, manipulação de dados e muito maisno conteúdo e nos aplicativos do Flash, Flex e AIR. www.joaoleal.net Formador: João José Leal 29
  30. 30. O ActionScript é executado com a AVM (ActionScript VirtualMachine), que faz parte do Flash Player e do AIR. O código do ActionScript em geral é compilado no formato decódigo de bytes (um tipo de linguagem de programação escrita e entendidapor computadores) por um compilador, como o criado no Adobe® Flash®CS4 Professional ou no Adobe® Flex™Builder™ou como o disponívelno Adobe® Flex™SDK. O código de bytes é incorporado aos arquivosSWF, que são executados pelo Flash Player e pelo AIR. www.joaoleal.net Formador: João José Leal 30
  31. 31. O que é o Action Script 3.0? O AS 3.0 nasceu da necessidade de conseguir ter uma melhorperformance nas aplicações e animações flash. Era necessário implementar alterações de raiz no AS 2.0 para queeste pudesse ter a performance do actual AS 3.0, por isso foi preferívelquase que criar a linguagem de novo. A linguagem AS 3.0 é literalmentetratada à parte da AS 2.0 pela runtime do flash player, pelo que logo aí sepode concluir que são mesmo diferentes a nível de código e deperformance. www.joaoleal.net Formador: João José Leal 31
  32. 32. O AS 3.0 oferece um modelo de programação robusto familiar aquem 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 umnovo conjunto de instruções de código de bytes e fornece aprimoramentos dedesempenho significativos;• Uma base de código de compilador moderna que executa optimizaçõesmais avançadas do que as versões anteriores do compilador; www.joaoleal.net Formador: João José Leal 32
  33. 33. • 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 aobjectos;• Uma API XML baseada na especificação de linguagem ECMAScript paraXML (E4X) (ECMA-357 edição 2) E4X é a extensão de linguagem paraECMAScript que adiciona XML como um tipo de dados nativo dalinguagem;• Um modelo de evento baseado na Especificação de eventos DOM(Document Object Model) nível 3. www.joaoleal.net Formador: João José Leal 33
  34. 34. Pontos Fortes do Action Script 3.0 O grande ponto forte do AS 3.0 é que este é essencialmente focadoem Programação Orientada a Objectos, e esta sua vertente torna tudo muitomais 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 sercompreendidas e interpretadas como no AS 2.0. www.joaoleal.net Formador: João José Leal 34
  35. 35. Problemas (???) do Action Script 3.0 Um dos grandes problemas que se apresentam aoprogramar em AS 3.0 é a impossibilidade de programar usando AS 3.0e 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 valoresdevolvidos, mesmo que a função não devolva nada ou devolva o argumentonulo. www.joaoleal.net Formador: João José Leal 35
  36. 36. Na versão AS 2.0 esta declaração era opcional, pelo que umasimples função: function olaMundo() {}funcionava€exactamente€igual€a€ function olaMundo():void {} No AS 3.0, o primeiro método foi eliminado, pelo que todas asfunções, argumentos e valores devolvidos (returns) têm que serdevidamente declarados. www.joaoleal.net Formador: João José Leal 36
  37. 37. Uma clássica estrutura de Objectos e da sua Linguagem Orientada, éque podemos ter um objecto Principal (Collection), e depois as suascategorias internas (Classes), que por si são um conjunto de código. Vejamos com o seguinte exemplo: www.joaoleal.net Formador: João José Leal 37
  38. 38. Transportes como objecto principal, dentro dele podemos terCarro, Avião, Moto e Autocarro e dentro de cada um destes temos os seusprocedimentos, imaginemos: Transportes -> Carro -> Levo 5 pessoas -> Avião -> Levo 350 pessoas -> Moto -> Levo 2 Pessoas -> Autocarro -> Levo 50 Pessoas www.joaoleal.net Formador: João José Leal 38
  39. 39. 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 podermosimplementar/extender uma das classes base, neste caso extendemos a classCarro do Objecto Transporte. www.joaoleal.net Formador: João José Leal 39
  40. 40. O melhor destes aspectos do AS3 é que o código temuma facilidade enorme de ser interpretado, bem como reutilizado epartilhado. A nível do seu "core" o Action Script é baseado na linguagemECMA-262 mais conhecida como ECMAScript que cresceu com osucesso da sua linguagem mais conhecida, o Javascript. www.joaoleal.net Formador: João José Leal 40
  41. 41. O AS2 foi estabilizado durante bastante tempo, mas acrescente necessidade de melhorar e acompanhar as tendências domercado 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 deprogramação, temos por exemplo actualmente o suporte nativo aobjectos 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 grandealteração do AS3 acrescenta inúmero pontos novos, mas as suas basesmantêm-se intactas. www.joaoleal.net Formador: João José Leal 41
  42. 42. Bases da Linguagem 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 www.joaoleal.net Formador: João José Leal 42
  43. 43. Existem alguns argumentos que podem alterar esta ordem, mas asbases de execução são estas, esses elementos podem ser por exemplo achamada 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 einterrompe a execução normal, só depois de o passo 6 executado é que aexecução prossegue para o passo 3. www.joaoleal.net Formador: João José Leal 43
  44. 44. Uso do ponto e vírgula (semicolon) “;” O uso oficial do ; serve para executar mais que uma instrução numalinha 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 é disparadoqualquer erro, mas por uma questão de organização e por facilidade decompreensão de outras linguagens. www.joaoleal.net Formador: João José Leal 44
  45. 45. Uso do Trace 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 detrace("olá Mundo") aparecerá no painel de debug olá Mundo. Notem queno caso do Flex, necessitam de ter o plugin com o debugger instalado, casocontrário não conseguirão fazer o devido debug. www.joaoleal.net Formador: João José Leal 45
  46. 46. Variáveis e tipos de dados As variáveis AS3, tais como as variáveis de outras linguagens deprogramação são usadas para guardar valores. As variáveis devem seridentificadas como únicas e que não interfiram com os elementos daprópria linguagem em si. Como por exemplo: minhaVariavel1 = 1; variav2 = 2; Um erro: var = 2; Este erro acontece porque o var é explicitamente usado pelalinguagem de programação para, curiosamente, declarar variáveis. www.joaoleal.net Formador: João José Leal 46

×