Tutorial Fireworks

Tutoriais por por Maurício Samy Silva

..: Animação quadro a quadro - 2a. Parte:..

« Voltar para 1a.Parte do tutorial


::Juntando tudo::

Abra um novo documento. Ajuste as dimensões de canvas para 120 x 135 (o tamanho dos frames) e na cor transparente;

Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;

Abra o painel frames Shift + F2;

Acompanhe a numeração na figura abaixo:

1-) Abra o menu suspenso do painel

2-) Escolha Add Frames (adicionar frames);

3-) digite 9 (frames);

4-) Marque After current frame (Depois do frame atual);

5-) Tecle OK;

Veja no painel que agora você está com 10 frames.

argh7

Abra o arquivo frame1.gif, selecione e tecle Ctrl + C para copiar;

Volte ao arquivo gifanimada.gif, vá ao painel frames e selecione o frame1, Tecle Ctrl + V esta ação irá colar o frame1.gif no frame 1 do arquivo gifanimada.gif;

Abra o arquivo frame2.gif, selecione e tecle Ctrl + C para copiar;

Volte ao arquivo gifanimada.gif, vá ao painel frames e selecione o frame2, Tecle Ctrl + V esta ação irá colar o frame2.gif no frame 2 do arquivo gifanimada.gif;

Repita os procedimentos descritos acima para todos os 10 frames.


::Salvando e testando a animação::

Vamos ajustar os parâmetros para salvar como gif animada. Isto é feito no painel Optimize (Tecle F6 para abrir e fechar o painel) escolhendo-se a opção Animated GIF e Exact, como mostrado na figura.

Nota: Neste painel você poderá configurar outros parâmetros de otimização para salvar suas criações, porém isto foge ao escopo deste tutorial. É importante que você escolha Animated GIF, caso contrário sua animação não funcionará no navegador.

Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;

Clique no triangulozinho do player, que aparece na barra logo abaixo do palco para visualizar sua GIF funcionando no palco.
Tecle F12 para visualizar sua GIF funcionando no navegador.

Você notará que a animação está muito acelerada.

argh8

::Ajustando o loop e a velocidade da animação::

Vamos agir na velocidade da animação para dar um efeito mais real.

Tecle Shift + F12 para abrir o painel Frames;

Clique sobre o pequeno triângulo localizado ao lado esquerdo da palavra Forever para abrir um menu Popup e escolha a opção Forever naquele menu.
Aqui você controla o número de vezes que sua GIF vai funcionar (loops) e Forever ajusta o funcionamento "para sempre" ou seja não pára de funcionar.
Se você escolher 2 por exemplo, a GIF funciona em dois achatamentos e pára.

Clique sobre o Frame 1 e com a tecla Shift apertada clique sobre o Frame 10 para selecionar todos os frames.

argh9

Duplo clique sobre um dos números (7 na figura) à direita para abrir a caixa de diálogo da velocidade.

Digite 15 e marque a caixinha Include when exporting, tecle Enter, e você verá a velocidade dos frames alterada de 7 para 15;

Tecle Enter.

argh10

Tecle Ctrl + F12 para testar a animação.


::Um toque final::

Vamos dar uma paradinha no início e no final da animação para melhorar o efeito;

Tecle Shift + F12 para abrir o painel Frames;

Clique sobre o Frame 1 e com a tecla Ctrl apertada clique sobre o Frame 10 para selecionar os Frame 1 e o Frame 2;

No frame 1, duplo clique sobre o número (agora, 15 no nosso caso) à direita para abrir a caixa de diálogo da velocidade;

Digite 100 e marque a caixinha Include when exporting, tecle Enter, e você verá a velocidade do Frame 1 e do Frame 10 alterada de 15 para 100;

Tecle Ctrl + F12 para testar sua GIF animada prontinha.

Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;

Terminado! ;-)
Votos que você consiga construir GIF animada com esta técnica.

Nota: Coloquei mais dois frames no final da minha animação onde aparece uma faixa vermelha escrito em branco Arghh. Este efeito deixo para você acresentar, como exercício.


:: Espaço para GIFs enviadas pelos meus visitantes ::

Construa sua GIF com esta tcnica e mande por email para eu publicar aqui.
GIFs enviadas: 1 (uma)


« Voltar para 1a.Parte do tutorial


Site criado em 22 de julho de 2004 por Maurcio Samy Silva Direitos de terceiros reservados 2004-2017.
Contedos no pertencentes a terceiros podem ser copiados vontade (crdito ser bem-vindo).
Powered by: Maujor ®