Pixel Transition: Tweening a Pixel Bender Filter in AS3

This post is by request from my friend Mike (http://www.mentalcollapse.com/)

He wanted to know how I did the pixel transition in the game I made at work for the movie MacGruber.

Its very very simple. I used TweenMax to tween a number value, and then applied that number value to a Pixel Bender filter.

This movie requires Flash Player 10

Complete source code is available on Github. The source includes that cool vintage magazine cover too, courtesy of wikimedia commons.

The project has two classes: The main file that loads an image and runs the tween, and the Pixel Bender filter, that I wrapped into its own class for ease of use.

The Main Class

	import com.greensock.easing.Quart;
	import com.greensock.TweenMax;
	import customfilters.PixelateBlender;
	import flash.display.Sprite;
	import flash.events.Event;
	 * ...
	 * @author Zach
	[Frame(factoryClass = "Preloader")]
	public class Main extends Sprite
		[Embed(source = '448px-Science_and_Mechanics_Nov_1931_cover.gif')]
		private var bgArt:Class
		public var filterAmount:Number = 0;
		public function Main():void
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
			addChild(new bgArt());
			TweenMax.to(this, 3, { filterAmount:100, yoyo:true, repeat:-1, onUpdate:applyFilter, ease:Quart.easeInOut } );
		private function init(e:Event = null):void
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
		private function applyFilter():void
			var pixelate:PixelateBlender = new PixelateBlender();
			pixelate.value = Math.ceil(filterAmount);
			this.filters = [pixelate];

The Pixel Bender Class

package customfilters
	import flash.display.Shader;
	import flash.filters.ShaderFilter;
	import flash.utils.ByteArray;
	public class PixelateBlender extends ShaderFilter
		//the file that contains the binary bytes of the PixelBender filter
		[Embed("pixelate.pbj", mimeType="application/octet-stream")]
		private var Filter:Class;		
		private var _shader:Shader;
		public function PixelateBlender(value:Number = 50)
			//initialize the ShaderFilter with the PixelBender filter we
			_shader = new Shader(new Filter() as ByteArray);
			//set the default value
			this.value = value;
		//This filter only has one value, named value
		public function get value():Number
			return _shader.data.dimension.value[0];
		public function set value(value:Number):void
			//not that pixel bender filters take an array of values, even
			//though we only have one in our example
			_shader.data.dimension.value = [value];

And that, Mike, is how i did it.

About The Plastic Sturgeon

This is my site. It gets pretty biographical on the About page.
This entry was posted in Code Snippets, Tutorials and tagged , , , , . Bookmark the permalink.

2 Responses to Pixel Transition: Tweening a Pixel Bender Filter in AS3

  1. richard says:

    ah of course… onUpdate inside of TweenMax. very good, i forgot about that one. thanks

  2. Ryan says:

    How would I go about converting this to a Flash Pro project?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>