6 AGOSTO 2007 / EDIÇÃO 146
SOLUÇÕES I FLASH CS3 – CURSO COMPLETO NÍVEL INICIADO
CONCEITOS DE ANIMAÇÃO
Continuamos a navegar no mundo
do Flash CS3. Desta vez,
avançamos nas capacidades de
desenho do programa da Adobe.
supei006a010.indd 6
2ª
PARTE
É certo que o Flash se tornou hoje em dia numa ferramenta
poderosíssima para o desenvolvimento de Rich WebSites
e Rich Internet Applications (este último tendo maior
prevalência com o novo Adobe Flex). Outrora, aquando o seu
desenvolvimento, a ideia era outra – FutureSplash de seu
nome. Nascido para pequenas animações, numa época em
que os sites estavam a ser carregados com “gifs animados”
e muita “música”, um bom site era preenchido com
introduções. 
09-07-2007 11:00:08
 AGOSTO 2007 / EDIÇÃO 146 7

6 – FRAME A FRAME
A animação tradicional é feita frame a frame. Mas o que é Na layer de baixo vamos atribuir o nome “chão”. Para tal
um FRAME? bastará clicar duas vezes sobre o nome “Layer1”.

Imagine que quer animar uma bola a cair no chão. O que é

necessário fazer? Desenhar a bola em todas as etapas da
queda, ou seja, vários desenhos de bola com
posicionamentos diferentes. A cada um desses desenhos
temos um frame!

No Flash existem três tipos de frames: Blank Keyframe,

Keyframe e Frame.

Keyframe
O primeiro deduz-se pelo nome que seja qualquer coisa
vazia (blank), mas o que é um Keyframe?
Repetir o processo para a layer de cima, com o nome “bola”
Agora, a título de exemplo experimente clicar no Blank
Keyframe da layer “chão” com o botão direito do rato.
Seleccione Remove Frames.

Blank Keyframe

Só é permitido desenhar qualquer coisa no palco caso

estejamos perante um Blank Keyframe ou um Keyframe.

Deverá de ficar com uma timeline semelhante à imagem

Keyframe

Após colocarmos algo no palco, o nosso Blank Keyframe

passa a ser um Keyframe, sendo que o aspecto visual na
Timeline altera-se. Um Keyframe guarda as características
de todos os objectivos que estiverem no palco, numa
determinada layer. Ou seja, podemos ter vários objectos no
palco, sendo que cada um está numa layer diferente.

Faça o seguinte, abra um novo documento do Flash e

adicione duas layers. Para tal bastará clicar no ícone Insert
Layer.

Neste momento, mantendo a layer “chão” seleccionada,

experimente desenhar uma linha horizontal que será o nosso
chão. Irá ter um aviso de que necessita de ter uma frame
para poder desenhar no palco. Novamente, clicando com o
“Insert Layer” botão direito do rato sobre o sítio onde queremos adicionar o
Blank Keyframe, vamos seleccionar Insert Blank Keyframe

supei006a010.indd 7 09-07-2007 11:00:24

 8 AGOSTO 2007 / EDIÇÃO 146
SOLUÇÕES I FLASH CS3 – CURSO COMPLETO NÍVEL INICIADO
Agora sim, será possível desenhar o chão. Ao desenhar a
linha, o Blank Keyframe passará a ter informação e passamos
a ter um keyframe. Seleccione a layer “bola” e desenhe uma
circunferência.
O que se pretende é animar a bola a cair e ressaltar no
chão. A animação da queda deverá durar aproximadamente
1 segundo. Na primeira lição falámos na velocidade do
filme, que é medido em FPS – Frames Por Segundo. O
Flash por definição arranca um documento com 12 fps.
Vamos aumentar para 20 fps, de modo a termos uma
animação mais fluida. O que também nos irá obrigar a
utilizar 20 frames para que a bola demora 1 segundo a cair,
mas já lá vamos.
Com a ferramenta Selection Tool, ou seja a seta, clique sobre
uma área qualquer vazia do palco. No painel das Properties
terá acesso às propriedades do palco (pois foi este que nós
seleccionamos).
supei006a010.indd 8
Voltamos a seleccionar o keyframe da “bola” clicando sobre
ele com o botão esquerdo do rato. Desta feita, ficamos com
todos os objectos dessa layer que estejam no palco. No
nosso caso será a bola. Vamos colocá-la bem encostada ao
topo do palco.
Como queremos que a bola demore 1 segundo a cair,
teremos de ter 20 frames com essa deslocação. Assim,
iremos seleccionar o frame 20 com o botão direito do rato e
Insert Keyframe.
Note que o “chão” desapareceu. Exactamente porque o
mesmo só aparece no frame 1. Imagine que cada frame é
uma folha de papel com as várias etapas da animação.
Iremos ter 20 folhas de papel. Se as passar rapidamente
terá uma animação frame a frame. Assim, se quer ver o chão
em toda a animação, o mesmo terá de estar desenhado em
todas as folhas de papel. O que deverá de fazer? A resposta
pronta neste momento deverá de ser “repetir o que se fez
anteriormente com a bola”. A resposta está correcta, mas
incompleta. Note que o Flash cada vez que encontra um
09-07-2007 11:00:37
 AGOSTO 2007 / EDIÇÃO 146 9

keyframe terá de calcular os objectos que estão nesses

keyframes. Este processo gasta recursos ao flash player, logo
deveremos de arranjar uma solução mais “económica”.
Sempre que temos um objecto que não sofre qualquer
alteração ao longo de uma animação, bastará informar o
Flash para que utilize os cálculos feitos no keyframe inicial
desse objecto. Por outras palavras, iremos prolongar o
keyframe com vários frames, tantos quantos necessários.

Seleccionar o frame 20 da layer “chão” com o botão direito

do rato e Insert Frame.

O que acontece? A bola está parada e num instante aparece

junto ao chão e volta a surgir em cima. Pois, esquecemo-nos
das várias posições da bola até chegar ao chão.

Seleccione o frame 3 da layer “bola” com o botão direito do

rato e adicione um “keyframe”. De seguida, desloque um
Note a diferença visual entre keyframe e frame. Note pouco a bola para baixo.
também que com o frame 20 da layer “chão” seleccionado,
ao efectuar qualquer alteração nos objectos dessa mesma
layer, essas alterações serão guardadas no primeiro keyframe
à esquerda do frame, no nosso caso será logo no frame 1.

Neste momento já é mais perceptível para que servem os

Keyframes, os Blank Keyframes e os Frames. Assim, vamos
criar uma animação “Frame a Frame”.

Seleccionamos o frame 20 da layer “bola” e arrastamos a

bola até esta tocar no chão.

Vamos repetir esse processo no frame 6, 9, 12, 15 e 18.

Para visualizar o resultado final seleccionamos o menu Testemos a animação. Está um pouco melhor, mas muito
Control e Test Movie aquém do que é possível nesta fase inicial.

supei006a010.indd 9 09-07-2007 11:00:58

 10 AGOSTO 2007 / EDIÇÃO 146
SOLUÇÕES I FLASH CS3 – CURSO COMPLETO NÍVEL INICIADO
Para termos uma noção dos passos intermédios da
animação, recorremos ao Onion Skin.
Mas afinal para que serve o “Onion Skin”? Antes de mais, o
nome Onion Skin é traduzível à letra, pois o conceito é
mesmo esse – as várias camadas da cebola. É como que
utilizar várias folhas de papel vegetal, que permitam
visualizar os desenhos ou fases da animação.
Repare que na numeração dos frames surgiram dois
“parêntesis” – o início e o fim do “Onion Skin”. Se arrastarmos
o início até ao frame 1, o aspecto será algo deste género.
Mas, a bola ainda não percorre todo o percurso até ao chão. Pois
é, quantos mais keyframes intermédios tiver, ou por outras
supei006a010.indd 10
palavras, quanto maior os locais pelos quais a bola passa, mais
fluido fica. Assim, iremos colocar keyframes em todos os frames e
em cada um deles iremos deslocar um pouco a bola. O objectivo é
que a bola percorra todo o percurso até ao chão, em que os
intervalos entre as posições sejam mais ou menos homogéneos.
Aconselho a que teste constantemente a animação de modo
a verificar se está a conseguir obter o efeito pretendido.
Como pode ver, a animação tradicional, designada por
“frame a frame” é uma animação complexa, trabalhosa e
que requer uma boa dose de paciência.
Na próxima lição, que iremos continuar a abordar técnicas
de animação, iremos falar de animação auxiliada pelo
computador – “Tween”. Com essas ser-nos-á muito mais
fácil efectuar uma animação um pouco mais complexa como
uma bola de basquetebol a cair sobre o cesto, e a ressaltar
várias vezes no solo.
Até lá, bom estudo.
09-07-2007 11:01:27