[Tutorial] Efeito chuva

Objetivo: Mostrar uma técnica de construção de efeito chuva.

Visão antecipada: NOTA: A página com a visão antecipada pode demorar a carregar.

Este tutorial mostra uma técnica para se obter o efeito chuva conforme mostrado nesta

VISÃO ANTECIPADA

A foto onde vai ser aplicado o efeito:

Escolha uma foto para aplicar o efeito. Mas lembre-se, dê preferência a imagens de dimensões reduzidas e procure otimizar a foto inicial para não ter como resultado final um arquivo muito grande.

Neste tutorial usei uma foto de 380 x 180 pixel extensão jpg e qualidade 70, resultando em uma gif final de pouco mais de 200kB (enorme!)

Nota: Tirei a foto da janela do meu escritório e a praia ao fundo é Copacabana. São 14:00h, hoje é o primeiro dia de inverno do ano 2005 e o tempo está nublado e com chuva.



Criando o primeiro layer de trabalho:

Carregue a foto no Fireworks e ajuste a tela para o mesmo tamanho da foto.

Eu recortei de uma foto inicial de 640 x 480 pixel uma fatia de 380 x 180 pixel como mostrado acima.

Se o painel Layers não estiver visível tecle F2;

Você verá no painel, uma miniatura da foto.

Acompanhe a numeração da figura:

1-) Dê dois cliques em cima da faixa Layer 1 para abrir o painel mostrado em 2;

2-) Digite um nome para o layer da foto. Eu escolhi o nome "Fundo" e depois, marque a caixinha "Share across frames";

3-) Clique em cima do ícone do lápis transformando-o em um cadeado e bloqueando o layer

A seguir clique no palco.



Criando o segundo layer de trabalho:

Ainda no painel Layers clique lá em baixo no ícone de uma pasta de arquivos para criar um novo layer.

Com o clique "aparece" em cima do layer "Fundo" um novo layer chamado "Layer 1".

Se você quiser pode mudar o nome deste layer como fizemos para o anterior, mas não bloqueie, deixe o ícone do lápis.



Construindo um retângulo transparente sobre a foto:

Selecione a ferramenta retângulo e ajuste os parâmetros para preenchimento solido na cor branca, sem linha de contorno e transparência 50.

A seguir arraste e desenhe o retângulo ultrapassando os limites da foto. Você notará que a foto vai ser vista por trás do retângulo e através da transparência.

Tudo como mostrado abaixo:



Aplicando efeitos no retângulo:

Selecione o retângulo que acabamos de construir;

Abra o menu suspenso Effects e escolha Noise ==> Add Noise;
No painel que se abre digite Amount: 280 e deixe Color desmarcada. Tecle OK

A foto vai ficar borrada! Não se preocupe e assim mesmo.

Abra o menu suspenso Effects e escolha Blur ==> Motion Blur;
No painel que se abre digite Angle: 240 e Distance: 40. Tecle OK



Entendendo o que fizemos até aqui e o que fazer agora:

Temos uma foto de fundo (onde vai chover) em um layer bloqueado para edição e que vai se distribuir por todos os frames ("Share across frames") da animação que iremos criar;

E, temos uma "chuva parada" no Layer 1, que simulamos com um retângulo branco transparente onde aplicamos dois efeitos.

Animação, como você já deve saber se faz com frames.

Vamos criar mais três frames que juntos com o frame inicial que é criado quando você abre o FW totalizarão quatro frames.

No frame inicial temos a foto e a chuva. Nos 03 frames que adicionaremos, serão criados com a foto de fundo, pois já dissemos ao FW ("Share across frames") o layer "Fundo".

Criando os frames:

Se o painel Frames não estiver visível tecle Shift + F2;

Clique no triangulozinho em cima e à direita no painel Frames para abrir um menu suspenso;

Escolha no menu a opção Add Frames para abrir uma caixa de diálogo.

Marque Number: 3 e After current frame como mostrado na figura. Tecle OK

Você vai notar que a "chuva" desapareceu e o Frame 2 está em azul. Isto significa que você está no Frame 2 que só tem o "fundo" ou seja a foto.



Colocando a chuva nos três Frames criados:

Clique em cima do Frame 1. Ele ficará azul e a "chuva" vai reaparecer;

Vá para o palco e clique fora da foto e próxima a ela para selecionar o retângulo da "chuva";

Com o retângulo selecionado, tecle Ctrl + C (Copiar).

E vamos colar o retãngulo em cada um dos três Frames.

No painel Frames, clique em cima de Frame 2 e vai aparecer a foto sem a chuva. Tecle CTRL + V (Colar) e aparece a chuva, pois colou a cópia.

Atenção agora: Ainda no Frame 2 clique no retângulo da chuva que você acabou de colar, segure o mouse e arraste um pouco para o lado e para baixo o retângulo.

Volte ao painel Frames clique no Frame 3, CTRL + V, arraste o retângulo para outro lado e para baixo. Tudo como você fez para o Frame 2.

Faça o mesmo para o Frame 4.



Testando a animação:

Tudo pronto. Vamos testar nossa animação.



Clique no botão play qua está no rodapé do palco.

Ficou ruim a animação. :
Volte nos frames e mude a posição do retângulo (clique e arraste).
Vá experimentando que você descobre um deslocamento ideal para o retângulo nos frames.

Finalizando:

Vamos "Salvar" nossa animação. Mas teremos que salvar como GIF ANIMADA, senão não vai funcionar no browser. E, temos que definir loop infinito para ficar chovendo sempre. :-).

Se o painel Optimize não estiver visível tecle F6;

escolha Animated GIF.

No painel Frames abra o menu suspenso lá em baixo do painel e escolha Forever
(loop infinito)



Agora pode Salvar: Menu File ==> Export

Veja como pode ficar noutra foto


FIM