December 8, 2007 

CardStack: This aint no Coverflow

I finally got around to playing a bit with Papervision3D, the open source 3D library for Flash,today. I have to say its been a lot of fun and its surprisingly easy to use. I was looking for some interface that I could build using what I was learning. The ITunes Coverflow seemed a good place to start but considering how many implementations of that I am seeing on the web, I couldn’t really bring myself to write a new one. So I started monkeying around with camera motion etc and finally reached a point I was pretty happy with, at least for day one.

The idea behind CardStack was to recreate to some extent the real world shelf. When the user clicks on an element on the shelf, it moves out of the shelf and can be interacted with.

This is just my first stab at this and there will be a lot more changes before I pack it into any sort of code I can share with the community. At the very least I can put in keyboard navigation and some reflection to make it a little more interesting.

Please let me know if there is something I can add to this to give it a little more zing.

  • http://www.kevin-fitzpatrick.net/blog Kevin Fitzpatrick

    Dude, this is awesome. How about if you could use the scroll wheel or some arrow graphics to move forward and back in the list to see items that are currently off stage?

    Hope things are awesome over there

  • http://tumblr.matschaffer.com Mat

    +1 on the scroll wheel. But I’ve complained about that in the past.

    I might try moving the “books” a little closer together. And of course, a reflective floor. Cause reflections are the new drop shadows…. and the new black.

  • http://www.arpitonline.com arpit

    @Mat, the mousewheel issue is only on the Mac, so I can enable that for the PC at least. And its a truth, everything is better with reflections ;)

  • David

    Pretty Awesome, but needs more cowbell.

  • http://zotagsearch.com Colum

    A way to make the images clickable, so users can go a page or a site through CardStack

  • smilinmonki666

    i think this is a good trick. Even though cover flow was created by someone other than Apple, Apple have had the power to implement & impress. This new spin on that interface will bring it further to peoples attention.

    I’m trying to get a web page up & going with something like this but I’m not a coder, but learning slowly :P

    My idea is, if you could have a web site for people to upload there images onto a server then a program on the Windows/ Linux/ Mac machine to grab the pictures for the user to view their friends images more smoothly & easier. Kinda like the Flicker web site, but more fun.

    I like the idea. Maybe add something like a slider to reach the back or even a carassol version, that way you can pre load the file without having to render the image straight away? Another Idea would be to have a menu system in this format. But when you click on Menu #1>>> it brings up a card with the sub menus???

  • José Barreras

    and code!