Papervision 3D Programming Tutorial - 3D Image Transitions

VIEW THE DEMO
DOWNLOAD THE CODE

In my last post I showed you how to create an image that would disintegrate into a number of smaller planes and then fly away. It was a cool effect, and as it turns out having already done the hard work of splitting up the image into a number of smaller planes allows you to easily create quite a number of additional effects.

In this demo I have taken the code from the last post and added the ability to transition between two images in a variety of different ways. Each option (selectable from the combo box in the top left of the screen) flips the individual planes that make up the final image  in a cascading "mexican wave" motion, either starting from a corner of the image or one of the side.

You could use this code quite easily to add a transition for your own images simply by replacing the png files in the media directory. It could easily add some pizzazz to (a usually quite boring) photo album.

Like the exlodo-logo example, the movement of the individual planes in this example is all handled by the Tweener library. I've said it before, but it bears saying again: Tweening rocks! It saves you from having to write so much boring boilerplate code to manage the modification of your Actionscript objects. I can't believe that I didn't start using Tweener earlier. If you don't know what Tweener is, check out this post here.

Check out more web development tutorials and articles here.

Go back to Papervision Tutorials