No post passado falei um pouco do pixel bender se não viu tem o link abaixo :
Introdução a Pixel Bender ToolKit
Então vamos lá vou utilizar o código do tutorial passado, mas antes temos que exportar o nosso script para o formato que o Flash suporta. então com o código anterior aberto.
kernel NewFilter < namespace : "Your Namespace"; vendor : "Your Vendor"; version : 1; description : "your description"; > { input image4 src; output pixel4 dst; void evaluatePixel() { dst = sampleNearest(src,outCoord()); dst.r += 0.4; dst.b -= 0.4; } }
Vamos exportar esse filtro para o Flash da seguinte forma: menu superior > file > Export Kernel Filter for Flash.
O pixel bender irá exportar uma extensão “.pbj” escolha o mesmo local onde será salvo seu Flash. Agora vamos para o Flash crie um novo documento. E importar a imagem “YellowFlowers.png” essa imagem você encontra no seguinte endereço:
* Windows: C:\Program Files (x86)\Adobe\Adobe Utilities\Pixel Bender Toolkit\sample images
* Mac OS: Mac HD/Applications/Utilities/Adobe Utilities/Pixel Bender Toolkit/sample images
Jogue a imagem no palco e converta em movieclip:
Coloque o nome de instância do movieclip “flor”:
Agora vamos ao código :
//criamos uma requisição com o endereço do nosso filtro var urlRequest:URLRequest = new URLRequest("pixelbender.pbj"); //instaciamos um novo URLLoader para carregar nossa requisição var urlLoader:URLLoader = new URLLoader(); urlLoader.dataFormat = URLLoaderDataFormat.BINARY; //adicionamos um evento para quando urlLoader.addEventListener( Event.COMPLETE, aplicarFiltro); urlLoader.load(urlRequest); function aplicarFiltro( event:Event ):void { var shader:Shader = new Shader( event.target.data ); var shaderFilter:ShaderFilter = new ShaderFilter( shader ); flor.filters = [ shaderFilter ]; }
Quando o filtro for carregado o Evento COMPLETE irá chamar a função “aplicarFiltro” dentro da função criamos uma variável do tipo Shader: é o kernel do pixel bender no Flash ele cuida de aplicar as funções dos filtros em cada pixel da imagem. Gerencia o input e o output de uma ou mais imagens.
Na linha seguinte temos o ShaderFilter ele é o filtro em si que é aplicado nos DisplayObjects, aplicamos diretamente da propriedade filters passando um array [] como podemos ver na última linha. Se tivessemos trabalhando com BitmapData usaríamos o método BitmapData.applyFilter().
Agora vou criar um novo filtro no pixel bender para ser usado no flash :
kernel NewFilter < namespace : "Your Namespace"; vendor : "Your Vendor"; version : 1; description : "your description"; > { input image4 src; output pixel4 dst; // estou criando um paramento "azul" do tipo float que seu valor minimo é -1; // o valor máximo é 1 e o valor default é 0 parameter float azul < minValue: -1.0; maxValue: 1.0; defaultValue: 0.0; >; // criei um parametro com o nome vermelho parameter float vermelho < minValue: -1.0; maxValue: 1.0; defaultValue: 0.0; >; // e um parametro com o nome verde parameter float verde < minValue: -1.0; maxValue: 1.0; defaultValue: 0.0; >; void evaluatePixel() { dst = sampleNearest(src,outCoord()); // no meu output eu mutiplico cada parâmetro em um canal especifico // float4 ele trabalha com os 4 canais vermelho, verde, azul e alpha dst += float4(0.5*vermelho, 0.5*verde, 0.5 * azul, 0.0); } }
Se você rodar o script no Pixel Bender irá notar que aparecerá 3 slides no canto direito da IDE do Pixel Bender.
Export para o script pra o formato aceito para o flash, e vamos montar o nosso exemplo:
Estou utilizando o fla antigo com o moviecliep “flor” mas agora eu vou criar 3 botões um pra cada canal, azul, verde e vermelho como na figura acima. Vou colocar o nome de instância de cada botão, btAzul, btVerde, btVermelho.
E agora vamos ao código:
var shader:Shader; var shaderFilter:ShaderFilter; var urlRequest:URLRequest = new URLRequest("pixelbender.pbj"); var urlLoader:URLLoader = new URLLoader(); urlLoader.dataFormat = URLLoaderDataFormat.BINARY; urlLoader.addEventListener( Event.COMPLETE, applyFilter ); urlLoader.load(urlRequest); function applyFilter( event:Event ):void { //aplicando o filtro shader = new Shader( event.target.data ); shaderFilter = new ShaderFilter( shader ); flor.filters = [ shaderFilter ]; //adicionando o evento de clique aos botões btAzul.addEventListener(MouseEvent.CLICK, setAzul); btVerde.addEventListener(MouseEvent.CLICK, setVerde); btVermelho.addEventListener(MouseEvent.CLICK, setVermelho); } function setAzul(e:MouseEvent):void{ // mexendo com os valores dos parameters que criamos // adicionando 1 ao canal azul e zerando os demais shader.data.azul.value = [1]; shader.data.verde.value = [0]; shader.data.vermelho.value = [0]; flor.filters = [ shaderFilter ]; } function setVerde(e:MouseEvent):void{ // adicionando 1 ao canal verde e zerando os demais shader.data.verde.value = [1]; shader.data.azul.value = [0]; shader.data.vermelho.value = [0]; flor.filters = [ shaderFilter ]; } function setVermelho(e:MouseEvent):void{ shader.data.vermelho.value = [1]; shader.data.azul.value = [0]; shader.data.verde.value = [0]; flor.filters = [ shaderFilter ]; }
Quando eu carrego o filtro do pixel bender eu adiciono os eventos de clique que contém as funções que manipulam os valores dos canais.
O resultado vai ser o seguinte:
Uma boa referência é o blog pixelero: