Pixel Bender 2. – filter ve Flashi

November 26th, 2008

V minulĂ©m dĂle (http://tom.krcha.com/pixel-bender-1-uvod/) jsme si pĹ™edstavili v kostce jazyk Pixel Bender. Vzhledem k tomu, Ĺľe je jiĹľ koneÄŤnÄ› ke staĹľenĂ CS4 Trial a vĹˇichni si jej mĹŻĹľou vyzkouĹˇet, pĹ™eĹˇel bych rovnou k vÄ›ci, a sice aplikaci Pixel Bender filtrĹŻ ve Flashi 10.

Aplikace, kterou si dnes vytvoĹ™Ăme je zde.
pixel bender in flash
(MusĂte mĂt nainstalovanĂ˝ Flash Player 10)

1) StĂˇhnÄ›te si a nainstalujte Flash CS4 zÂ www.adobe.com/cz/downloads/

2) Nachystejte si nÄ›jakĂ˝ Pixel Bender filter (viz. inspirace v minulĂ©m dĂle)

IdeĂˇlnĂ vĹˇak bude pouĹľĂt nÄ›jakĂ˝ pokroÄŤilejĹˇĂ filtr. JĂˇ jsem zvolil twirl.pbk – pĹ™Ăklad, kterĂ˝ se nainstaluje s Pixel Benderem.Â

- OtevĹ™ete twirl.pbk v Pixel Bender Toolkit

- File -> Export Kernel Filter For Flash Player … uloĹľte soubor *.pbj – pokud nastane problĂ©m pĹ™i exportu*, odstraĹte nÄ›kterĂ© nepodporovanĂ© ÄŤĂˇsti nebo pouĹľijte mĹŻj vyexportovanĂ˝ twirl.pbj.Â

* Flash Player Pixel Bender Runtime nepodporuje vĹˇechny moĹľnosti jazyka Pixel Bender (napĹ™. blok needed) – o tÄ›chto moĹľnostech si Ĺ™ekneme v dalĹˇĂm dĂlech.Â

3) SpusĹĄte Flash CS4

- VytvoĹ™Ăme si tĹ™Ădu PixelBenderLoader, kterĂˇ bude naÄŤĂtat filtry za bÄ›hu a aplikovat je na jakĂ˝koliv DisplayObject = snad jakĂˇkoliv vizuĂˇlnĂ komponenta, MovieClip, Video, Fotka, Vektor apod.

- PixelBenderLoader je moje tĹ™Ăda, kterou mĹŻĹľete pouĹľĂvat, nicmĂ©nÄ› inovaci se meze nekladou a urÄŤitÄ› si najdete vlastnĂ cestu pro vaĹˇe konkrĂ©tnĂ vyuĹľitĂ.

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.*;
	import flash.events.EventDispatcher;
 
	public class PixelBenderLoader extends EventDispatcher
	{		
		private var loader:URLLoader;
		private var shader:Shader;
		// ShaderFilter muzeme aplikovat pomoci parametru filters DisplayObjectu
		private var filter:ShaderFilter;
 
		public function PixelBenderLoader():void
		{
 
		}
	        // nacteni filtru
		public function loadFilter(filterURL:String):void{
			loader = new URLLoader();
			loader.dataFormat = URLLoaderDataFormat.BINARY;
 
			// odchytime jen udalost nacteni, doporucuju vsak odchytit pripadne errory
			loader.addEventListener(Event.COMPLETE, onComplete);
			loader.load(new URLRequest(filterURL));
		}
 
		// aplikuje filter pomoci transformacni objektu
		public function applyFilter(displayObject:DisplayObject,transformObject:Object){
			applyShaderWithTransformObject(shader,transformObject);
			filter = new ShaderFilter(shader);
			displayObject.filters = [filter];
		}
 
                // vrati filter pro pripadnou aplikaci volnejsim zpusobem
		public function getFilter(transformObject:Object):ShaderFilter{
			applyShaderWithTransformObject(shader,transformObject);
			filter = new ShaderFilter(shader);
			return filter;
		}
 
                // aplikuje transformacni objekt na shader pomoci cyklu
		protected function applyShaderWithTransformObject(shader:Shader,transformObject:Object):void{
			for(var i:String in transformObject){
				shader.data[i].value = [transformObject[i]];
			}
		}
 
		// po naÄŤtenĂ filteru
		protected function onComplete(e:Event):void
		{
			shader = new Shader(loader.data);
			dispatchEvent(e);
		}
	}
}

transformObject:Object – hodnoty parametrĹŻ, kterĂ© filter umoĹľĹuje mÄ›nit
napĹ™. tranformObject = {radius:150};

- Ve Flashi pak pouĹľijeme filter tĂmto zpĹŻsobem

NaÄŤtenĂ filtru:

var pbl:PixelBenderLoader = new PixelBenderLoader();
pbl.addEventListener(Event.COMPLETE,onComplete);
pbl.loadFilter("twirl.pbj");

Aplikace filtru – v tomto pĹ™ĂpadÄ› budeme mÄ›nit radius:
(deformClip je klasickĂ˝ MovieClip v library, obsahuje fotku a dynamickĂ˝ text)

function applyRadius(radius:Number){
	// transformacni objekt, zmenime jen radius
	var transformObject:Object = new Object();
	transformObject.radius = radius;
 
	// zmen dynamicky text
	deformClip.txt.text = radius.toString();
 
	// aplikuj filtr
	pbl.applyFilter(deformClip,transformObject);
}

ZmÄ›na parametru pĹ™i pohybu myĹˇi:

// zmen radius pri pohybu mysi
function mouseMoveChange(event:MouseEvent):void{
	applyRadius(Math.abs(event.localX));
}

OdchycenĂ udĂˇlosti naÄŤtenĂ filtru – v tuto chvĂli lze zaÄŤĂt filter pouĹľĂvat:

function onComplete(e:Event):void{
	trace("filter load complete - aplikace");	
	applyRadius(100);
	stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveChange);
}

Demo soubory ke staĹľenĂ zde.

Posted in Uncategorized | 11 Comments »

Facebook comments:

11 Comments »

Zdravim.

super clanok od ktoreho sa odrazilo vela ludi.

Napada ma ci by sa do triedy nedal importovat uz nacitany filter. a nie ho vzdy nacitat. pricom by bola trieda univerzalna

nieco taketo :
pbl.loadEmbedFilter(“pixelate.pbj”);
ostatne metody zachovali.

alebo to napvno anstavit do tej triedy.

sukusal som to dlho ale bez uspesne

[Embed(source='Test_filter.pbj',mimeType='application/octet-stream')]
private static const WaterKernel: Class;

Comment by TS — March 7, 2009 @ 2:09 am
Diky.

Tu druhou variantu bych musel vyzkouset. V tuto chvili si nejsem jisty zdali to tak jde. Nicmene cilem je udelat z *.pbj instanci ShaderFilter

Comment by tom — March 8, 2009 @ 11:23 pm
Cavko, paradny clanok, ale neviem ako docielti pomocou tvojej tredy aby som nastavil dva a viac parametrov, danemu filtru napriklad

function applyRadius(radius:Number){

var transformObject2:Object = new Object();
transformObject2.outerRadius = 20

// PROSTE TOTO TO NEVIE SPRACOVAT A NEVIEM AKO TO ZAPISAT
transformObject2.center = [0,0];

pbl2.applyFilter(obrazok,transformObject2);

}

Comment by MISO — March 19, 2009 @ 10:19 am
//dalsi parametry posles velmi jednoduse:

var transformObject:Object = new Object();
transformObject.parametr1 = hodnota1;
transformObject.parametr2 = hodnota2;

// samotna aplikace:
pbl.applyFilter(deformClip,transformObject);

Comment by tom — March 24, 2009 @ 1:25 am
to ano ale ono mi to pride ze to neni osterene ked ma filtren na pariklad parameter center ktory sa sklada z dvoch suradnic napr

transformObject.center = [0,5]
alebo

transformObject.center[0] = 0

transformObject.center[1] = 5

tento zapis to uz nezobere

Comment by MISO — March 24, 2009 @ 10:13 pm
musis to zapsat takhle:
transformObject.center = new Array();
transformObject.center[0] = 0;
transformObject.center[1] = 5;

Comment by tom — March 27, 2009 @ 3:30 pm
dakujem moc

Comment by miso — March 29, 2009 @ 3:33 am
cavko po dlhom case som sa ktomu dostal a popisany postup mi nefunguje importujem triedu napisem :

var pbl:PixelBenderLoader = new PixelBenderLoader();
pbl.addEventListener(Event.COMPLETE,onComplete);
pbl.loadFilter(“pinch.pbj”);

function applyRadius(radius:Number){
// transformacni objekt, zmenime jen radius

var transformObject:Object = new Object();
transformObject.center = new Array();

//transformObject.magnification = radius;

transformObject.center[0] = 5;
transformObject.center[1] = 5;

// aplikuj filtr
pbl.applyFilter(deformClip,transformObject);
}

// zmen radius pri pohybu mysi
function mouseMoveChange(event:MouseEvent):void{
applyRadius(mouseX/500);
}

function onComplete(e:Event):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveChange);
}

a po spusteni hlasi chybu

ArgumentError: Error #2004: One of the parameters is invalid.
at flash.display::DisplayObject/set filters()
at PixelBenderLoader/applyFilter()
at omnio_fla::MainTimeline/applyRadius()
at omnio_fla::MainTimeline/mouseMoveChange()

Comment by Miso — April 10, 2009 @ 5:07 pm
fuu nejako zle to sformatovalo

Comment by Miso — April 10, 2009 @ 5:07 pm
I like browsing your blog given that it has quite interesting themes.

Comment by Phil Ladika — September 7, 2011 @ 9:57 pm
Cpr KIts

Comment by Homepage — December 9, 2011 @ 6:10 am