Papervision 3D
If you work with Flash at all, by now you will have heard of Papervision 3D, the open source project that has turned the Flash world on its head by introducing a 3rd dimension. I had a quick play with Papervision 3D a few months ago and found it surprising easy to pick up. It is now in public beta so I decided to dust off my old project and rewrite it in Actionscript 3.
3D image gallery demo
Inspired by Antti Kupila’s stunning 3D interface for last.fm, I created a simple gallery of album covers using Papervision 3D. For the reflections of the album covers I have used Pixelfumes’ Reflection class.
View demo
Download source
If you’re curious to see how I put this demo together, take a look at my Flash source files.
Using Papervision 3D
The biggest challenge for me was porting my code to Actionscript 3, as it was the first time I had written AS3 code. But as far as Papervision 3D itself, it really is a piece of cake to get your head around. The documentation that comes with Papervision 3D is a bit hard to follow, but if you download the zipped version of Papervision 3D from Google Code it contains a bunch of great examples which help to introduce the basic concepts.
The cool thing about Papervision is how it can be adapted to all kinds of 3D applications. My main interest is in the possibilities for creating 3D application interfaces, but people have also created 3D games, models and animations. Expect to see a lot more 3D Flash in the next couple of years!
15 thoughts on “Papervision 3D”
Comments are closed.
Very nice work Jonathan
@Antti – Thanks! And thanks also for getting me interested in Papervision 3D to begin with ;)
May be u should try Alternativa3d flash engine too
http://blog.alternativagame.com/en/ here is their dev blog with some examples
HI,
very nice work…i am started doing experiments …i have one doubt can u help us how to add mouse events for planes…we need a tut ..
thanks in advance dude
Like how you used the reflection. Good to know! Only how do I get the image quality on 100% ? I know it’s uses more memory but I want to find out. Would be awesome if you could me mail me.
@Erik – I’m not quite sure what you mean, but you could try increasing the number of segments in the 3D planes.This is set in \source\classes\scene3d\ImageGallery.as
Very nice example….Interesting blog. I took a look this project, unfortunately it was a little over my Flash abilities to use but nice to see some practical examples floating around rather than the simple rotating cube.
Hi Jonathan,
I have gone through the example and it really helps a lot, thank you for this post. I am working on one project which is based on http://www.ubisoft.com flash component.. I wanted to know that is this also done through papervision3D with actionscript or some other way.. Please help me out with the confusion and some guidance.
Thanks & Regards
Kumar
@Kumar – The ubisoft image gallery might also be achieved with the 3d tools in Flash CS4.
Thank you very much for your reply, Jonathan
But you said might also be achieved with 3d tools.. I have gone through the site but I guess it is not done through 3d Tools.. from CS4… So, I would really like to know whether it is done through papervision3D or just by using actionscript like the i-Tune cover flow. I went through FlashDen site and came accross 3Dmultimedia Studio tool which uses extensive papervision3D and all the flash components which cannot be changed accordingly to our needs. So just was curious to know the exact process since i am very much determined to work on this kind of Flash Gallary but not getting the right start… Sorry, that I asked to much…. but couldn’t help asking .. Hope you understood my concern and would be waiting for your reply.
Thanks & Regards
Kumar
@Kumar – I can’t tell you just by looking whether Papervision was used on the Ubisoft site or not. But my guess is that you could not achieve the effect you want without placing the images in 3d space, whether using Papervision or another method. And again, you might want to look into the 3d features in Flash CS4, which seem ideal for animating flat objects in 3d space: http://www.adobe.com/devnet/flash/articles/3d_support.html
Hello,
Is it hard to add mouse events to this gallery? i mean when you click a picture it goes center to screen and when you click it again it goes back to its position…
@lorenzo – I made this demo over two years ago, and from what I recall at that time it was difficult (impossible?) to add mouse events to Papervision objects. But I imagine that has changed now, so perhaps if you can get my gallery working with the latest Papervision release you’ll be able to do what you want. But I don’t think it would be a simple modification.
Okay, thanks a lot. I actually tested it and i get trace when mouse is clicked…
this.addEventListener(MouseEvent.CLICK, onClick);
// now gallery is on stage, initialize it
gallery.init();
}
I actually tested this with drawLoadBar(); and when i click a certain photo then the loaderbar is loaded…but ill guess ill try to search somewhere else…but anyway.very nice looking gallery!
@lorenzo – I guess I was wrong about the mouse events! Like I said it was a while ago I made this so my memory is probably a bit rusty :P