Quando
se fala em Fireworks imediatamente pensamos em Design, redução
do tamanho de uma imagem, criação de botões de menu,
etc. O que pouca gente sabe é que o Fireworks nos permite também
criar pequenas animações, em formato de gifs animadas.
É claro que quando queremos fazer animações mais
complexas ou no formato shockwave, utilizamos o Flash para isso, o programa
de animações por excelência, mas se queremos apenas
um banner simples, do tipo, Nome do Site surgindo, ou efeito de pisca-pisca,
podemos usar o Fireworks, com a certeza de que ele se saira muito bem.
Entendendo o
conceito:
Antes de botar a
mão na massa, é preciso compreender algumas coisas antes:
Uma animação não passa de um conjunto de quadros
ligeramente modificados, que quando vistos a uma determinada velocidade
parecem ser um único quadro movimentando-se pela nossa tela.
Quem já brincou de desenhar bonequinhos de palito na ponta das
folhas cadernos e depois correr o dedo por elas e ver o bonequinho se
mover conhece o conceito, pelo menos na prática.
Ao desenharmos o bonequinho de pálito, tinhamos o cuidade de
fazer ligeiras modificações em cada página desenhada
e quanto mais páginas, melhor a impressão de movimento
tinha o desenho.
Na animação no computador, nossas páginas viram
Frames ou quadros e quanto maior a quantidade de quadros, melhor fica
a nossa animação.
A velocidade também é um fator muito importante, pois
se folheassemos nossas páginas devagar, seria apenas um desenho
após o outro, mas ao imprimirmos velocidade ao passar de uma
página para outra, criariamos a ilusão do desenho animado.
A velocidade no computador é definida pela quantidade de quadros
por segundos (frames por segundos) - quanto mais quadros podemos visualizar
em um segundo, mais perfeita fica nossa animação, embora
uma velocidade muito grande, pode comprometer o resultado final. Devemos
portanto ficar em um meio termo - nem tão devagar, que se perceba
a passagem de um quadro para outro, nem tão rápido que
não se veja a animação.
Criando uma animação:
Entendido o conceito
e o principio de como a coisa funciona, entramos na fase de como fazer.
Para exemplificar esse artigo, optei por criar uma animação
simples, imitando um Semáforo:
1) Crie um novo
documento, tamanho 251 (W) por 236 (H) - Canvas transparente;
2) Abra a janela Layer (Window - Layer) e insira 3 novas layers;
3) Renomeie a primeira para Círculo 1, a segunda para Círculo
2 , a terceira para Círculo 3 e a quarta para retângulo;
4) Na Layer Retângulo, desenhe um retângulo com bordas arredondadas
e de tamanho 110 (W) por 236(H);
5) Formate esse retângulo com preenchimento Preto, textura Metal
em 50%;
6) Aplique um efeito Inner Bevel - tipo Ring, tamanho 7 e enevoamento
0;
7) Desenha um Círculo na Layer Círculo 1, com tamanho
60(W) por 60(H) e posicione-o como na figura abaixo:
8) Repita o procedimento acima em cada uma das layers Círculos,
posicionando os círculos um abaixo do outro:
9) Formate os círculos com o mesmo preenchimento e a textura
do retângulo;
Nessa primeira etapa
criamos a base do que será a nossa animação, definido
o design, passamos para a segunda etapa, que é a construção
da animação.
Como já foi dito antes, precisamos distribuir nosso design pelos
Quadros ou Frames e podemos fazer isso de duas maneiras:
a) Adicionando Frames
- A maneira mais díficil, pois cria-se um Frame em branco e se
teremos que copiar e colar o que desejarmos repetir em todos os quadros;
b) Duplicar Frames - quando fazemos um design, não importa quantas
layer tenhamos criado, elas irão virar um único Frame
que comportará todos os objetos das layers. Esses objetos podem
ser manuseados e modificados sem nenhum problema.
Quando Duplicamos
Frames - clicando na seta ao lado da Guia Frames e selecionando Duplicar
Frames - aparecerá a seguinte janela:
Nela deveremos definir o número de vezes que iremos duplicar
o Frame e se essas duplicatas serão colocadas antes ou depois
do frame original.
Continuando o Nosso
Exemplo:
Para o nosso exemplo,
iremos duplicar o Frame 4x, deixando marcada a opção após
o Frame atual.
1) No Frame 2, selecione
o círculo superior e formate-o com preenchimento Vermelho, sem
textura, efeito Inner Bevel - tipo Flat - tamanho 5 e Efeito Glow -
cor Vermelha, tamanho 5 e enevoamento 12.
2) Digite acima dele o texto: Previna-se.
3) Formate o texto com fonte Tahoma, tamanho 12 e cor branca;
4) Na Frame 3 selecione o segundo círculo e formate-o com preenchimento
amarelo, sem textura, efeito Inner Bevel - tipo Flat - tamanho 5 e Efeito
Glow - cor amarela, tamanho 5 e enevoamento 12;
5) Digite o texto: USE e posicione-o centralizado no círculo;
6) Formate o texto com fonte Tahoma, cor Vermelha e tamanho 14;
7) No Frame 4 selecione o terceira círculo e formate-o com cor
verde, sem textura, efeito Inner Bevel - tipo Flat - tamanho 5 e efeito
Glow - cor Verde, tamanho 5 e enevoamento 12.
8) Digite o Texto: AntiVírus e posicione-o abaixo do terceiro
círculo;
9) Formate o texto com fonte Tahoma, cor branca e tamanho 14.
Nossa animação está praticamente pronta, precisamos
agora definir a velocidade de transição quadro-a-quadro.
Para isso, devemos primeiro testar na velocidade padrão 7 frames
a cada 100 segundos, se achar rápido ou lento demais, selecione
a frame que você deseja mudar a velocidade e clique na seta ao
lado da Guia Frame, selecione Propriedades, na janela que se abrirá,
aumente ou diminua a quantidade de frames que será visível
a cada 100 segundos.
Lembre-se: quanto maior a quantidade de Frames a cada 100 segundos,
mais lenta ficará sua animação.
O próximo
ítem é definir se nossa animação ficará
se repetindo a vida toda (Forever) ou se após um determinado
número de loop, ela encerra.
Na Paleta Frame, na sua parte inferior, existe o botão Gif Animation
Loop, que nos permite definir a constância de nossa animação.
Se marcarmos a opçao Forever, nossa animação se
repetirá indefinidamente, mas se selecionarmos quaisquer dos
valores númericos, será a quantidade de loop que nossa
animação dará.
Exportando como
Gif Animada:
Devemos salvar normalmente
nossa animação, mas para colocarmos no nosso site, vamos
exportá-la em formato de gif animada, com o canvar transparente.
1) Clique em Export
Preview;
2) Clique na Guia Options;
3) Selecione a opção Formato - Gif Animada;
4) Escolha Alpha Transparente - definição de fundo transparente;
5) Clique na Guia Animation:
Observe que nesta Guia também podemos definir
a quantidade de quadros por segundo e se a taxa de repetição
de nossa animação.
Modifique algo se
desejar, se não, clique em Export, dê um nome para sua
animação, no nosso exemplo, o nome é antivirus
e visualize o resultado final no seu navegador.
Patricia Daltro
