Jan
7
2011

“Slide Wring” Pixel Bender Filter for Flash

This post is also available in: Russian

Let me introduce to you the effect of alternating images named “Slide Wring”. This shader was created with the Pixel Bender specially for the Flash platform. Watch the demo, download the shader and use it for free!

If you want to use any .pbj filter in your AS3 project, you need to embed it at compile time or to load it at run time. Examples for both ways can be found in the documentation. I will tell you only how to use the filter.

First of all, we create the BitmapData object and the Bitmap object based on it. Then we add our Bitmap object to the stage:

mixbmd = new BitmapData(s1bmd.width, s1bmd.height);
mixbmp = new Bitmap(mixbmd);
addChild(mixbmp);

Let’s initialize the effect:

with (shader.data) {
	// specify our slides
	// it should be BitmapData objects
	src1.input = slide1bmd;
	src2.input = slide2bmd;

	// specify the width and the height of our slides
	// (we can't get it inside a shader!)
	size.value = [slide1bmd.width, slide1bmd.height];

	// specify the border thickness
	// this value should be in the range from 0 to 28
	// the default value is 7
	borderThickness.value = [7];

	// specify the border color as an array [r, g, b]
	// each value should be in the range from 0 to 1
	// the default value is 0.95
	borderColor.value	 = [0.95, 0.95, 0.95];
}

To control the transition from one slide to another, use the last parameter:

// specify the transition phase
// this value should be in the range from 0 to 1
// the default value is 0
shader.data.phase.value = [phase];

When all the preparations are complete we can run the filter:

// the result will be written in the mixbmd object
// and we will see it immediately
var shader_job:ShaderJob = new ShaderJob(shader, mixbmd);
shader_job.start(true);

That’s all. Use it, report bugs, feel free to send your suggestions. I’m planning to add some features, for example:

  • specifying the degree of the shading/shining of the slides during transition
  • specifying the coordinates of the center of the wring
  • wringing around a horizontal axis
  • specifying the border position (left/right, top/bottom)

About the Author:

1 Comment + Add Comment

  • thank you O_O!

Leave a comment

Links

  • FlashDevelop.org
  • TexturePacker
  • Форум Flasher.ru
  • Форум Flashgamedev.ru