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
package { 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 //embedded _shader = new Shader(new Filter() as ByteArray); //set the default value this.value = value; super(_shader); } //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.

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