Pixel Acres

Papervision 3D

Papervision 3D logo

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

Papervision 3D Gallery

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

View my 3D image gallery

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 Responses to “Papervision 3D”

  1. Antti Kupila says:

    Very nice work Jonathan

  2. Jonathan says:

    @Antti – Thanks! And thanks also for getting me interested in Papervision 3D to begin with ;)

  3. urals says:

    May be u should try Alternativa3d flash engine too
    http://blog.alternativagame.com/en/ here is their dev blog with some examples

  4. saravanan says:

    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

  5. Erik says:

    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.

  6. Jonathan says:

    @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

  7. Slevn says:

    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.

  8. Kumar says:

    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

  9. Jonathan says:

    @Kumar – The ubisoft image gallery might also be achieved with the 3d tools in Flash CS4.

  10. Kumar says:

    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

  11. Jonathan says:

    @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

  12. lorenzo says:

    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…

  13. Jonathan says:

    @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.

  14. lorenzo says:

    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!

  15. Jonathan says:

    @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

Leave a Reply