Guerreiros Imortais Grand Chase
Deseja conectar-se ?

Participe do fórum, é rápido e fácil

Guerreiros Imortais Grand Chase
Deseja conectar-se ?
Guerreiros Imortais Grand Chase
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

..: Efeito chuva :..

Ir para baixo

..: Efeito chuva :.. Empty ..: Efeito chuva :..

Mensagem por hkd. lukasmakio Ter Set 15, 2009 7:39 pm

::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.
..: Efeito chuva :.. Chuva1

::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.
..: Efeito chuva :.. Chuva2

::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.
..: Efeito chuva :.. Chuva3 ::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:
..: Efeito chuva :.. Chuva4

::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

..: Efeito chuva :.. Chuva5

::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.

..: Efeito chuva :.. Chuva6

::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.
..: Efeito chuva :.. Chuva7

::Testando a animação::


Tudo pronto. Vamos testar nossa animação.
..: Efeito chuva :.. Chuva71
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)
..: Efeito chuva :.. Chuva8
Agora pode Salvar: Menu File ==> Export

::Veja como ficou::


Você já viu na VISÃO ANTECIPADA e agora veja com OUTRA FOTO
Fonte: http://maujor.com/fw/chuvafw.php
hkd. lukasmakio
hkd. lukasmakio
Admin
Admin

Reputação : 49

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos