Cool Warp Transition Effect for Text or Images

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.

This movie requires Flash Player 10

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.

About The Plastic Sturgeon

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

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>