Last year I worked on a movie website that had a magic theme, and we cooked up a bunch of cool transition effects to bring things on and offscreen. Too many it would seem, as by the time we were done quite a few were left “on the cutting room floor” as they say in the film business. The one you see in on this page is one of them. Its a kind of twisty-warpy effect. The image twists and ripples in, then ripples and twists out.
The secret sauce is Adobe’s Pixel Bender for Flash. The effect combines two different Pixel Bender kernels controlled by TweenMax to transition in. You can add this effect to any display object. That means it works for text, vectors, and bitmaps. The implementation is as simple as this:
// Create Image that we will twist var bmb:Bitmap = new screengrab() as Bitmap; // Create twist. It works as a display object, so you add it to the stage instead of the object you see getting twisted. var twist:TwirlEffect = new TwirlEffect(); addChild(twist); twist.effectIn(bmb);
The on thing to note is, the effect creates a copy of the original, using bitmapdata.draw(). You add the effect to the stage in the same location as the original display object. And you will need to hide the original or it will still be visible as the transition happens. In the source for this example, the original is never even added to the stage.
Its very fast and I’ve had it transition images as large as 1080×768 with no problem. You can have more than one instance running at the same time (within reason). In short, its pretty versatile. Also, I left in some additional parameters in there commented out if you want to monkey around with your own variation of the effect. Also – the example code loops automatically. You can easily remove that by editing the calls to TweenMax to eliminate the “onComplete:” calls.
With luck this is just the effect you need to add some pizazz to your won project. Let me know if you end up using it!
The full source code is here from GitHub.