[Tutorial] GIF animada

Objetivo: Mostrar como salvar uma GIF animada.

Introdução:

Tenho lido nos comentários dos tutoriais que publico, que vários de meus visitantes e leitores encontram dificuldade de "fazer funcionar" as GIFS animadas.

Comentários do tipo: "Segui todos os passos do tutorial, deu tudo certinho, a GIF funciona no palco do FW, mas quando salvo e visualizo, a GIF não funciona"

Bem, é 99,9% a chance de você ter salvo a GIF sem "avisar" para o Fireworks que trata-se de uma GIF animada.

Neste tutorial vou mostrar como fazer isto e suas GIFS animadas passarão a funcionar.

Avisando ao FW que trata-se de uma GIF animada:

ESTÁ TUDO PRONTO E VOCÊ AGORA VAI SALVAR SEU TRABALHO

Abra o painel Optimize. Se ele não estivar aberto ou visível, tecle F6;

Clique no botão indicado pela seta na figura abaixo para abrir um menu suspenso.
É neste menu que você informa ao FW o tipo de arquivo gráfico a salvar.

Escolha Animated GIF



Escolhendo o número de vezes que sua GIF vai "rodar":

Você pode definir o número de vezes que sua animação "roda" escolhendo quantos LOOPS ela vai cumprir, logo que a página for carregada.

O FW dá opções de 1 - 2 - 3 - 4 - 5 - 10 - 20 vezes ou para sempre, sem parar (Forever)

Abra o painel Frames. Se ele não estivar aberto ou visível, tecle Shift + F2;

Clique no triangulozinho indicado pela seta na figura abaixo para abrir um menu suspenso.
É neste menu que você informa ao FW o número de loops da sua GIF animada.

Escolha Forever para sua GIF ficar funcionando o tempo todo.



Definindo uma velocidade para sua GIF:

Você pode definir a velocidade da sua animação no painel Frames.

Clique em cima de Frame 1 (primeiro frame) para selecioná-lo.

Com a tecla Shift pressionada clique em cima do último frame (no caso da figura Frame 4)

Com isto você selecionará todos os frames e mudará a cor do fundo para a cor azul, como mostrado abaixo.



Com todos os frames selecionados clique sobre um dos números que aparecem a direita de cada frame (no caso da figura: número 7). Este número define o tempo de cada frame em centésimos de segundo.

Ao clicar sobre o número abrir-se-á um janela para você escolher um tempo a seu gosto.

Eu escolhi 10 na figura abaixo. Escolha 30, 80, 100, 2, 1 e teste a GIF para você perceber como acelera ou retarda a animação.

Não esqueça de deixar marcada a caixinha "Include when exporting"



Nota: Mostrei como alterar o tempo de todos os frames da animação de uma só vez.

Você poderá alterar os tempos dos frames ou de grupos de frames individualmente obtendo por exemplo, um efeito de acelerar e em seguida desacelerar na GIF, ou de "pulos" na GIF.

Testando a GIF:

Você não precisa visualizar no navegador (teclar F12) para testar a GIF animada.

O FW tem no rodapé de canvas um botão player para a GIF.

Veja abaixo:




FIM