Papervision 3D Programming Tutorial - 3D Image Transitions

Posted Mar 05, 2009 by mcasperson / comments 0 comments / Print / Font Size Decrease font size Increase font size

Implement 3D image transitions with this Papervision demo . Source code and online example included.

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

Rate this Article:

Be the first to rate me.


* You must be logged in order to leave comments, please login or join us.

Comments

Volvox777
Volvox777 said... on September 23rd, 2009 at 3:56 AM

Apologies - just worked out what I was missing - absolute newb to flex

Volvox777
Volvox777 said... on September 23rd, 2009 at 3:26 AM

I love the effect but I am not sure of the reason for the post - the code doesn’t seem to have any fla - just the as classes and the tutorial doesn’t explain in any kind of detail how the effect was achieved. Nice work but should it be called Papervision show off rather than a tutorial?



Bookmark and Share
Sign up for our email newsletter
Name:
Email: