Efeito ondulação de água

[AiroN]

Neste tutorial você vai aprender como criar um efeito de ondulação na água com onduação, utilizando uma imagem estática e máscara em Flash realista em uma imagem estática usando máscara em Flash.

 

Veja o efeito já pronto:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

Aqui vamos criar um documento e escolher a opção Action Script 2.0.

 

Passo 1: Configurando Propriedades do Documento

 

Agora selecione Modificar (Modify) na barra de menu e selecione Documento (document) ou diretamente Você pode pressionar Ctrl + J para abrir as propriedades do documento. Veja a imagem de referência abaixo.

 

 

Agora altere as dimensões do estágio (palco) como 700 x 552 e as FPS (frames por segundo) é 24, como mostrado na figura abaixo.

 

Passo 2: Importando Imagem

 

Primeiro, importe as imagem utilizada para o Flash. Para fazer isso, vá ao menu Arquivo (File)> Importar (Import)> Import to Library (Importar para Livraria).

 

 

 

Passo 3: Posicionando a imagem no palco

 

Antes de começar, já temos a camada 1, agora o de nome a essa camada "cenário img". Abra o painel da biblioteca pressionando Ctrl + L. Em seguida, arraste a imagem da biblioteca para o palco.

 

 

Alinhe a imagem para o centro do palco utilizando o painel de alinhar. Tenha em mente que para alinhar qualquer item para o centro do palco voê terá que marcar a opção "to stage ou para palco".

 

 

Passo 4: Retirando parte da ilha

 

Agora Copie as imagens, para fazer isso pressione Ctrl + C e insira uma nova camada como "cenário img2" em seguida, pressione Ctrl + Shift + V.

 

 

Agora insira uma nova camada novamente acima da camada de img2 cena, e de o nome como forma ilha.

 

 

Agora, desenhe uma forma usando a ferramenta caneta ou uma ferramenta de linha ao redor da ilha e área do céu. perbeba o contorno preto na imagem de referência abaixo:

 

 

Agora clique com o botão direito do mouse sobre a camada "forma ilha" e selecione máscara (mask).

 

 

Você vai encontrar o algo imagens mascarado como na imagem abaixo.

 

 

Passo 5: Criando símbolo de animação

 

Agora insira uma nova camada, e nomeie como "animação de água".

 

 

Pegue a imagem da biblioteca, e alinhe centralmente no palco. Converta a imagem para movieclip, para fazer isso, selecione a imagem> clique com o botão direito do mouse> Convert to Symbol (Converter para símbolo). Veja abaixo a imagem de referência.

 

 

Agora pressione Ctrl + T para abrir o painel de transformação ou vá para o menu da janela (Window e selecione transformar (transform). Aumente a largura e a altura para 102%.

 

 

Passo 6: Crie máscara para a área da água

 

Agora insira uma nova camada e nomeie como "listras máscara".

 

 

Crie listras usando a ferramenta retângulo, como indicado na imagem de referência abaixo. Tenha em mente o espaço entre cada retângulo ou tira deve ser o mesmo, bem como o tamanho da tira deve ser o mesmo também.

 

Passo 7: Animando as listras

 

Agora vá para o frame 100 e insira um keyframe (quadro chave) apertando F6.

 

E mova as tiras para a parte inferior como mostrado na Figura abaixo. Tenha em mente, não se movem listras para fora da área de praia. E a posição tira no quadro 1 e 100 devem ser iguais. Ao fazer isso, pode diminuir o "empurrão" da animação

 

Agora selecione qualquer frame (quadro) entre os quadros 1 e 100 camada "máscara de listras". Em seguida, clique com o botão direito e selecione Criar interpolação de forma (Create shape tween).

 

Agora clique com o botão direito sobre a camada "máscara de listras" e selecione máscara (Mask).

 

Agora vá a Timeline (Linha do Tempo)

Passo 8: Finalizando a animação

 

Agora insira uma nova camada e de o nome de "Máscara"

 

Crie um retângulo como mostrado abaixo. Ao fazer isso, pode esconder a parte extra da camada de água animação.

 

Agora clique com o botão direito sobre a camada "máscara" e selecione máscara (mask).

 

 

Em seguida, escolha CTRL + ENTER para publicar o arquivo flash para obter o efeito de água realista.

FIM, Seja feliz! rs

 

Fonte:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

&

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

[Netinho]

Achei bem interessante esse efeito. Vou tentar fazer um aqui :)