Hoje neste tutorial você vai aprender uma técnica avançada chamada “perlinNoise”, que pode ser usada para criar um efeito realista de água em qualquer imagem.

Vamos aborda o efeito em duas situações diferentes: Um lago, com o efeito em toda a imagem e uma cachoeira, usando um processo mais complexo.

Antes de começar

Este exemplo irá utilizar alguns elementos de ação – o script DisplacementMapFilter, perlinNoise e bitmapData no ActionScript 3.

O filtro “perlinNoise” é um dos mais versáteis, normalmente usado para dar algum realismo á animação, mais também um dos mais complicados de se trabalhar. Não vamos explicar como ele funciona, mas para que você possa entende-lo segue algumas documentações nos links abaixo:

• Displacement Map Filter: Clique aqui
• BitmapData : Clique aqui
• PerlinNoise: Clique aqui e aqui

Requerimentos para este tutorial:

• Ter instalado a versão do Flash CS4 (original) ou CS3 (original);

• Possuir uma imagem de um lago específico para esta etapa;

• Compreender alguns conceitos básicos do Flash, como bitmaps e dados de bitmap.

Passo 1

Crie um novo projeto no Flash usando o ActionScript 3.0.

Passo 2 – Criando o primeiro exemplo

Importe a imagem baixada (lago ou rio) no palco.

Vá ao menu File > Import > Import to Stage e selecione a imagem.

Agora a imagem é automaticamente inserida no palco do Flash, apenas centralize-a em sua tela como a o exemplo abaixo:

Coloque um nome qualquer na camada desta imagem (para fazer isso clique duas vezes na “Layer 1” e altere o seu nome).

Em seguida precisamos transformar a nossa imagem em um MovieClip para receber o filtro de água. Basta clicar sobre a imagem no palco, e em seguida, com o botão direito do mouse sobre a mesma, selecione a opção “Convert to symbol” e nomeie-a como “backImg”.

Agora vá para o painel de propriedades e escreva o nome de instância (<Instance Name>), backImg1:

Passo 3 – Crie uma camada para as ações

Clique no botão (em amarelo na imagem abaixo) para inserir uma nova camada (Layer), coloque o nome dela de “actions”.

Agora temos duas camadas separadas:

Passo 4 – Escrevendo um código

É nesta parte que o tutorial começar a ficar um pouco complicado, mais vamos explicar resumidamente.

Selecione a camada “actions”, e pressione a tecla F9. Com o painel de ações agora aberto, escreva o seguinte código:

var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height);

var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60);
var pt1:Point = new Point(0,0);
var pt2:Point = new Point(0,0);
var perlinOffset:Array = [pt1, pt2];

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void {

  perlinOffset[0].x +=1;
  perlinOffset[1].y +=0.1;

  bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset);
  backImg1.filters=[disp];

}

Código simples, mas uma poderosa animação, basta executar o projeto (Ctrl + Enter).

Passo 5 – Entendendo o código

As duas primeiras linhas do código são a principal declaração para a operação, e cria um novo BitmapData com as mesmas dimensões da imagem movieclip:

var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height);

Instanciamos o DisplacementMapFilter com o BitmapData (BM), mapa dos pontos de partida (0,0), o ponto de partida X e Y (1,2) e os fatores de escala x, y (10,60).

As seguintes linhas:

var pt1:Point = new Point(0,0);

var pt2:Point = new Point(0,0);
var perlinOffset:Array = [pt1, pt2];

São os pontos de base a ser executados para mover o efeito “perlinNoise”, definido o perlinOffset.

Temos então que adicionar o EventListner para repetir a posição do filtro e fornecer-nos  uma animação em tempo real, porque a velocidade de aplicação é de 25 frames por segundo (que pode ser alterado nas propriedades do documento).

Temos que substituir o perlinNoise do descolamento com um novo mas com algumas pequenas alterações no perlinNoise offset, que irá resultar em uma animação suave.

addEventListener(Event.ENTER_FRAME, onFrame);

Agora, o manipulador e o efeito principal:

function onFrame(evt:Event):void {

perlinOffset[0].x +=1;
perlinOffset[1].y +=0.1;
bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset)
backImg1.filters=[disp];

}

Aqui, entra em cada evento de quadro que ajusta a posição (offset) da nossa perlinNoise. Está irá produzir uma animação de movimento liso e dinâmico:

perlinOffset[0].x +=1;
perlinOffset[1].y +=0.1;

Estes valores mudam a direção do movimento do mapa.

Temos agora que reconstruir a perlinNoise da nossa bitmapData:

bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset)

Em “perlinNoise”  temos alguns parâmetros apenas para brincar com eles.

Agora, finalmente voltamos a aplicar o filtro:

backImg1.filters=[disp];

Execute o projeto!

Passo 6 – Criando um exemplo de cachoeira

Nos passos seguintes, vamos criar um efeito em cascata, por isso você deve salvar esta imagem abaixo:

[cachoeira]

A única coisa que temos que aplicar no Filtro perlinNoise e o “falling water”, fazendo com que a água caia da cachoeira. Bem, nós precisamos criar uma única cópia da água (para fazer isso, abra a imagem anteriormente no photoshop e com a ferramenta de recorte, retire somente a cachoeira (água caindo) em uma camada separada).

Caso tenha dificuldade nesta etapa, você pode baixar os elementos já separados abaixo:

Cachoeira.png

Cachoeira2.png

Passo 7 – Posicionando as imagens corretamente

Crie duas camadas (como mostrado anteriormente) entre as camadas image e actions. Mova a nossa imagem de água anterior ao início da faze e coloque sobre a camada inferior a nova imagem “cachoeira.png”, e na camada superior a “cachoeira2.png”. Coloque ambas as imagens na mesma posição. A cachoeira recortada deve estar acima da imagem original:

INCORRETO:

CORRETO:

Converta as duas imagens em Movieclip, com os nomes “back” e a outra “waterfall”, coloque estes mesmos nomes em suas respectivas instâncias no painel de propriedades (isso é muito importante para o funcionamento).

Passo 8 – Código completo do efeito

Em uma nova camada “actions”, digite o código a seguir e teste o seu projeto!

/** Código da água**/

var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height);
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60);

var pt1:Point = new Point(0,0);
var pt2:Point = new Point(0,0);
var perlinOffset:Array = [pt1, pt2];

/ ** Código da cachoeira ** /

var bm2:BitmapData=new BitmapData(waterfall.width, waterfall.height);
var disp2:DisplacementMapFilter = new DisplacementMapFilter(bm2,new Point(0,0),1,2,10,60);

var pt3:Point = new Point(0,0);
var pt4:Point = new Point(0,0);
var perlinOffsetFall:Array = [pt3, pt3];

addEventListener(Event.ENTER_FRAME, onFrame);

function onFrame(evt:Event):void {

/*água no perlinnoise */

perlinOffset[0].x +=1;
perlinOffset[1].y +=0.1;
bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset);backImg1.filters=[disp]

/* Movendo y, criando o efeito queda*/

perlinOffsetFall[0].y -=1;
perlinOffsetFall[1].x -=0.1;

bm2.perlinNoise(20,10,1,99,true,false, 7,false,perlinOffsetFall);

waterfall.filters=[disp2]

}

Resultado Final:

Esperamos que tenham gostado pessoal, até a próxima!