Using Tweener with Pixel Bender Filters
In recent experimentation with Pixel Bender I found myself wanting to tween parameters of Pixel Bender filters (who wouldnt? 
). Tweener is definitely my favorite tweening library for Flash (someone ported it to javascript too, has anyone used it?) and the registerSpecialProperty method is perfect for this.
(You need Flash Player 10 to view this swf correctly)
Tweener.registerSpecialProperty("_bubble_center", _bubble_get, _bubble_set, [bubble_shader, "center"]);
public static function _bubble_get(p_obj:Object, p_parameters:Array, p_extra:Object = null):Number {
return p_parameters[0].data[p_parameters[1]].value;
}
public static function _bubble_set(p_obj:Object, p_value:Number, p_parameters:Array, p_extra:Object = null):void {
p_parameters[0].data[p_parameters[1]].value = [p_value];
p_obj.filters = p_obj.filters;
}
Tweener.addTween(photo_holder, {
_bubble_magnification: 10,
time: 2,
onComplete: beatIn,
transition: "easeInOutQuint"
});
Full source for my test app…
/**
* @author Cary Dunn [cdunn@elctech.com]
* @version 1.0
*/
package {
//- LIBRARIES ---------------------------------------------------------------------------------------------
import flash.display.MovieClip;
import flash.display.Stage;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.Shader;
import flash.filters.*;
import flash.system.LoaderContext;
import flash.net.*;
import flash.events.*;
import caurina.transitions.*;
public class TweenPB extends MovieClip {
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
private var photo_holder:MovieClip;
private var bubble_shader:Shader;
private var bubble_shader_filter:ShaderFilter;
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
public function TweenPB():void {
photo_holder = new MovieClip();
addChild(photo_holder);
loadPhoto("ELC0105.jpg");
}
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
private function registerSpecialTweenersFor(bubble_shader:Shader):void {
Tweener.registerSpecialProperty("_bubble_magnification", _bubble_get, _bubble_set, [bubble_shader, "magnification"]);
Tweener.registerSpecialProperty("_bubble_center", _bubble_get, _bubble_set, [bubble_shader, "center"]);
}
private function loadPhoto(photo_url:String):void {
var loader:Loader = new Loader();
var context:LoaderContext = new LoaderContext();
context.checkPolicyFile = true;
loader.contentLoaderInfo.addEventListener(Event.INIT, function(e:Event){
var bitMap:Bitmap = Bitmap(e.currentTarget.content);
photo_holder.addChild(bitMap);
loadFilter();
});
loader.load(new URLRequest(photo_url), context);
}
private function loadFilter():void {
var load_filter:URLLoader = new URLLoader();
load_filter.dataFormat = URLLoaderDataFormat.BINARY;
load_filter.addEventListener(Event.COMPLETE, function(e:Event){
trace("Load PBJ complete.");
bubble_shader = new Shader(e.currentTarget.data);
bubble_shader.data.center.value = [stage.stageWidth/2,stage.stageHeight/2];
bubble_shader.data.magnification.value = [1];
bubble_shader.data.outerRadius.value = [stage.stageWidth];
bubble_shader.data.innerRadius.value = [50];
bubble_shader_filter = new ShaderFilter();
bubble_shader_filter.shader = bubble_shader;
photo_holder.filters = [bubble_shader_filter];
registerSpecialTweenersFor(bubble_shader);
beatOut();
});
load_filter.load(new URLRequest("fish.pbj"));
}
private function beatOut():void {
Tweener.addTween(photo_holder, {
_bubble_magnification: 10,
time: 2,
onComplete: beatIn,
transition: "easeInOutQuint"
});
}
private function beatIn():void {
trace("here")
Tweener.addTween(photo_holder, {
_bubble_magnification: 1,
time: 2,
onComplete: beatOut,
transition: "easeInOutQuint"
});
}
//- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
//- GETTERS & SETTERS VARIABLES ---------------------------------------------------------------------------
public static function _bubble_get(p_obj:Object, p_parameters:Array, p_extra:Object = null):Number {
return p_parameters[0].data[p_parameters[1]].value;
}
public static function _bubble_set(p_obj:Object, p_value:Number, p_parameters:Array, p_extra:Object = null):void {
p_parameters[0].data[p_parameters[1]].value = [p_value];
p_obj.filters = p_obj.filters;
}
//- HELPERS -----------------------------------------------------------------------------------------------
//- END CLASS ---------------------------------------------------------------------------------------------
}
}
4 Comments
This helped me out alot! Thank you!
thanks, but i have a Question:
i have dowloaded a PB twirl filter that has a “center” parameter. this parameter takes not one but two float number. so my question is: how do i tween the “center” paramater is there a way to give it two number?
Great stuff! Here’s my variation:
import caurina.transitions.Tweener;
var mcName = theImage;
// Pixel Bender ___________________________
//—————————————–
var loader:URLLoader;
var shader:Shader;
var shaderFilter:ShaderFilter;
loader = new URLLoader();
loader.dataFormat=URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, loadComplete);
loader.load(new URLRequest(“PixelationFilter.pbj”));
function loadComplete(e:Event):void {
shader=new Shader(loader.data);
shaderFilter=new ShaderFilter(shader);
registerSpecialTweeners(shader);
mcName.filters=[shaderFilter];
}
function registerSpecialTweeners(shader:Shader):void {
Tweener.registerSpecialProperty(“pixelate”, getPix, setPix, [shader, "pixSize"]);
}
function getPix(p_obj:Object, p_parameters:Array, p_extra:Object = null):Number {
return p_parameters[0].data[p_parameters[1]].value;
}
function setPix(p_obj:Object, p_value:Number, p_parameters:Array, p_extra:Object = null):void {
p_parameters[0].data[p_parameters[1]].value=[p_value];
p_obj.filters=p_obj.filters;
}
function doTransition(e:Event):void {
shader.data.pixSize.value=[30];
Tweener.addTween(mcName, {pixelate:1,time: 1,transition: “easeOutQuad”});
}
stage.addEventListener(MouseEvent.CLICK, doTransition);
@Tyg3r: awesome!
@matan: a little late for response, but you can use arrays to represent tuples and such