Efeito Chuva

    [Admin] Win32
    [Admin] Win32
    [Admin]
    [Admin]

    Masculino Mensagens : 175

    Efeito Chuva Empty Efeito Chuva

    Mensagem  [Admin] Win32 em Qui Jan 20, 2011 10:42 pm

    ::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!)
    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 FICO::
    Efeito Chuva Chuvafinal1
    Efeito Chuva Chuvafinal
    [Admin] GuiHh
    [Admin] GuiHh
    [Admin]
    [Admin]

    Masculino Mensagens : 173
    Idade : 25
    Localização : Brasil

    Efeito Chuva Empty Re: Efeito Chuva

    Mensagem  [Admin] GuiHh em Dom Jun 26, 2011 11:47 pm

    Muiiito bom perfeito irmao e noix

      Data/hora atual: Seg Set 16, 2019 4:28 pm