Técnicas Multimédia

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€-

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

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 ?

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

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

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

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)

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

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

Interface

Toolbar (Barra de Ferramentas)

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

Modos de visualização da área de trabalho.
Selector Worplace

Painéis
Ferramentas opcionais.

Painéis
Ficheiros abertos (*.FLA).

Á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)

Painéis
Área de painéis personalizável que pode conter qualquer painel do menu
Window. Ficam dispostos em separadores.

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

Library (Biblioteca)
Armazena e organiza qualquer componente a integrar no documento
(símbolos do Flash ou bitmaps, sons e vídeos externos).

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

.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.

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

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

• 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

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

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.

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.

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.

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?

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;

• 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.

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

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

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 {}

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:

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

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.

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.

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.

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

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€6€(termina€passo€6)€->€passo€7
Neste€caso€a€ordem€seria
passo€1€->€passo€2€->€(passo€6)€->€passo€3
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.

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) “;”

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

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

Técnicas Multimédia

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Destaque

Destaque (20)

Semelhante a Técnicas Multimédia

Semelhante a Técnicas Multimédia (20)

Mais de João Leal

Mais de João Leal (20)

Último

Último (20)

Técnicas Multimédia