Como criar um banner animado no Fireworks

Neste tutorial falaremos sobre um tema que é muito importante: A criação de um banner animado, totalmente pelo Fireworks. Isso se torna possível devido ao trabalho com frames que o Fireworks apresenta.

Mãos-a-obra!

Começaremos criando um novo documento com as medidas padrão de um Full Banner: 468px de largura por 60px de altura.

É sempre interessante adicionar uma borda preta de 1px ao banner. Isso faz com ele fique sempre definido. Veja abaixo nosso exemplo:

Para aplicar essa borda, você deverá criar um retângulo e ajustá-lo com as seguintes coordenadas e características:

Passada essa parte, começaremos a criar o banner em animações e conteúdo. Nosso tema será "Semana Fireworks", seguindo a logo do início desta matéria. Faremos 4 Frames:

01 - "Semana Fireworks"
02 - 7 matérias exibindo potencialidades do Fireworks
03 - Veja aplicações diretas para cada matéria!
04 - Clique aqui e acesse agora!

Iniciamos então com a logo. Esta é a logo:

Nosso tema visual será esse. Utilizamos um fundo com a cor #FFCC00.

Para conseguir os outros efeitos, usamos a logo esticada pelo processo de diminuir com valor 2 e aumentar para a medida total, utilizando o tipo de Layer (ou Blend mode = Modos de Mistura) "Screen". Atrás da palavra "Semana", existe a mesma logo maior com a mistura screen.

Para criar o segundo frame (ou STATES, no caso do novo Fireworks) da animação, duplicamos o frame 1 (é bom que se duplique o frame pois assim, não teremos que repetir a criação da borda e de outros eventuais detalhes que venham a se repetir), siga as seguintes imagens:

No Painel "States” (ou Frames). Para duplicar o frame, clique no ícone da parte superior direita
(sinalizado na imagem acima em vermelho).

Depois clique em "Duplicate State" (versão antiga do Fireworks é “Duplicate Frame”). Outra tela se abrirá para você especificar o número de vezes que você duplicará o frame 1.

Em nosso exemplo, duplicaremos 3 vezes para ter um total de 4 frames.

As opções que você tem são: Inserir novo frame no início, inserir novo frame antes do frame atual, inserir novo frame após o frame atual ou inserir novo frame no fim. Vamos selecionar "After current state".

Veja a duplicação no painel "Frames" (ou States):

Clicando no State 2, poderemos modificá-lo. E desenharemos a segunda etapa do banner, como no exemplo abaixo:

Neste quadro, mantemos o mesmo fundo, excluindo a logo do Fireworks e o primeiro texto. Adicionamos o segundo texto e trabalhamos com 2  números "7" girados e maiores.

Veja que é tudo muito simples. Após criar o primeiro frame com bordas e fundo você caminha mais rápido nos próximos frames.

Logicamente se você for usar sempre o mesmo tema em todos os frames.

Prosseguindo para o próximo frame, faremos o mesmo esquema, mantendo o visual e trocando apenas o texto:

Repita os passos para o ultimo frame:

Pronto. Temos os quatro frames do banner prontos. Agora precisamos acertar o tempo de cada frame,  e isso é feito no painel "Frames" (ou States). Veja abaixo:

Ao clicar duas vezes em cima do número "7", um campo aparecerá e você digitará o valor que deseja. Valores baixos definem um frame muito rápido, já  valores altos deixam um frame com maior duração. Um bom valor para um frame normal é de 150 a 250. Mais abaixo, veremos um caso para usarmos valores muito baixos.

Prosseguindo, aplicaremos à nossos frames o tempo de 200 (2 segundos).

Com toda criação e configuração pronta, é hora de exportar. Utilizaremos o "Export Preview" (Ctrl+Shift+X). Uma nova tela será exibida, deixando a sua disposição todas as opções de export.

As configurações padrão são:

Na caixa "Format", você deverá selecionar "Animated Gif". As outras opções variam de acordo com a configuração de qualidade. A paleta que oferece mais fidelidade de cores é a "Exact" e a "WebSnap Adaptive", porém, a Exact tem um limite de cores para deixá-las exata. Ao passar desse limite, a paleta é mudada para WebSnap Adaptive com 256 cores (256 cores é o limite de cores que o Formato GIF suporta).

Na guia "Animation", temos a lista de todos os frames do arquivo. Veja abaixo:

Ao selecionar, o frame será exibido na área de exibição ao lado destas configurações.

Exportamos nosso banner com 32 cores. O Resultado final é o seguinte:

Assim, finalizamos a construção de um banner pelo Fireworks.

Mas vamos um pouco mais fundo e falaremos agora de uma animação que faça o banner correr de lado, descer ou subir.

Trata-se de animações usando 3 frames: O primeiro mostra o estágio normal. O segundo mostra o estágio da animação e o terceiro mostra o estágio final. Você deverá adicionar mais frames entre o estágio normal e o resultado final de acordo com sua animação.

Veja abaixo um exemplo em que o texto andará do lado direito para o lado esquerdo, usando 3 frames:

Para fazer esta animação, usamos os seguintes frames:

O primeiro e o último frame possuem o tempo de 150, enquanto o segundo frame, que faz a sensação de movimento, tem tempo de 3.

Este tipo de animação pode ser muito útil, com textos, imagens e a própria borda preta do banner.... vale a imaginação.

Finalizando, lembramos de que a animação pode ser rodada dentro do próprio fireworks. Veja abaixo:

No pé da janela do documento, você tem as opções de voltar o frame, ir para próximo, iniciar animação e etc.