TiltViewer – A 3D Flickr Image Browser

TiltViewer

TiltViewer allows you to browse Flickr’s most interesting images in a 3D space. Images are pulled from Flickr’s Interestingness list.

TiltViewer was built using Away3D, a branch of Papervision. Currently Away3D provides better handling of mouse events for nested 3D Objects. One limitation of Away3D is that there is no access to a 3D object’s sprite, so you can’t apply filter or alpha effects. I’m guessing that soon these features will be added to both engines.

Does a 3D UI give more functionality than the equivalent 2D interface? No, but its certainly a lot cooler! Part of the motivation to build this was to explore ways to make 3D interfaces simple and intuitive.

Being able to load Flickr images into a 3D engine was recently made possible when Flickr added crossdomain XMLs to it’s image servers. Thanks Flickr!

Click here for more about TiltViewer.

68 Responses

  1. David says:

    Looks Great!

    I am really enjoying all the run-time 3D interaction these engines enable.

    I have to admit I wasn’t aware Away3D was a Branch of PV3D

  2. John Grden says:

    I love it – the images look great! The interactivity might be enhanced maybe if you added a little bit of a scroll/movement of the entire scene when the mouse gets out of center by 300 or something like that. if I wanted to click an image in a row above or below, i could barely click the white area to move up or down. Make sense? Other than that, i really dig it.

    I did have a question about the mouse comment: what do you mean about nested 3D objects? PV3D has alot of control over mouse events and I’m wondering if we’ve missed a cool feature or detail.

    the quality on the images is stunning – when you get up close they look beautiful – nice work!

  3. Administrator says:

    John – thanks for the feedback. You’re right – its hard to click on other images when you are zoomed in. I’ll fix this.

    Regarding PV3D not handling mouse events for nested 3d objects – AFAIK this is a know issue (see this thread: http://osflash.org/pipermail/papervision3d_osflash.org/2007-May/thread.html#6156 ). I experimented with the latest code and couldn’t get it to work. If I have a ObjectContainer3D (the image grid) which has some child objects (the images), those child objects do not fire mouse events.

    Regarding the image quality – yes they look great. This is achieved using Away3D’s ‘PreciseBitmapMaterial’, which I believe has been ported back into PV3D.

  4. Fabrice Closier says:

    Very nice work!
    “I have to admit I wasn’t aware Away3D was a Branch of PV3D”
    Well it’s not 🙂

    Away started as an improved PV version, and is now already a different engine but still shares architecture ideas.
    The next release will be a totally new engine, sharing nothing but the 3D rules common to every 3D apps.

  5. jankees says:

    Nice work! It looks very nice!

  6. zap says:

    Esta muy bien! un 10!!!

  7. TiltViewer – Imagenes de Flickr 3D…

    TiltViewer es el nuevo proyecto de Airtight Interactive que tiene como función mostrar imágenes obtenidas de Flickr. TiltViewer es muy sencillo de usar y nos da la posivilidad de poder navegar a través de las imágenes por medio del mouse o utilizan…

  8. Marco says:

    Congrats on the FWA today, you’re the man, and welcome to Santa Monica.

  9. Josh says:

    This is the coolest thing I’ve seen in weeks. Any chance you’d be able to release a download version for our own photos like Simpleviewer?

    I’m in shock how well browsing with a bit 3D adds to the experience so much more… 😀

  10. Man, awesome app, you really impress me with your work.
    Congrats, you always go beyond the limits and show us something amazing.

  11. Patrick says:

    This is VERY slick stuff – nice work indeed.

    Would love to see something like this used as an analytics tool for charts and graphs.

    -pjc

  12. -ben says:

    Fantastic use of PV3D and overall interactivity — very simple and intuitive UI

    As has been asked, are there any plans to distribute this as has been done with SimpleViewer etc. (I’d like to also see it applied for general dynamic image galleries via external xml and jpg files — seems simple enough?)

    Wonderful job again —

  13. Loic says:

    Amazing. Please release a non Flickr version !!! I’d pay quite a bit for it…

    L

  14. James Carlos says:

    This is really great guys…nice job. So fresh and yes, so clean.

  15. Jamal says:

    Wondering if there’s plans for this to be released for personal use like mentioned above.

  16. Marcus says:

    is it available for download?

  17. Alberto says:

    very good work!
    it is possible to buy it?

  18. luis al berto martinez sanchez says:

    me gusta este progrma me interesa mucho ok

  19. Felix Turner says:

    Thanks for all the great feedback!

    For people who are interested in licensing the source code, please contact: licensing@airtightinteractive.com

  20. […] Leyendo John Nack On Adobe veo que la gente de Airtight Interactive ha creado un interfaz 3D en flash para navegar por las fotos más interesantes del Flickr. Una interfaz sencilla y rápida facilita el navegar por fotos que en su mayoria destacan por su calidad.En el blog de Airtight Interactive explican como está programada la herramienta. […]

  21. […] a fun, intuitive user experience. Images are pulled from Flickr’s Interestingness list. PermalinkFiled in: Flash | Photography |Usability  […]

  22. Ken L says:

    Very robust display of photos! BRAVO!

    When will it be available to purchase and use in my web site?

    Thanks
    Ken

  23. […] Impressive! Made me dizzy after a while though… but definitely worth a try. TiltViewer allows you to browse Flickr’s most interesting images in a 3D space. Images are pulled from Flickr’s Interestingness list. By Airtight Interactive, the same people that brought the Autoviewer. […]

  24. Felix Turner says:

    Hi,

    I’ve added the option to view your own images in TiltViewer by appending a query string on the URL. Check the ‘Display Custom Images’ section here for details.

  25. Simon J says:

    Felix,

    When I open the TiltViewer application I get a Flash 9 popup asking where the debugger host application running. The application works by clicking cancel on the popup if there are no query strings appended. If there are it doesn’t display any images. The application did work on my PC prior to the latest changes. Has the latest version been compiled with debugging switched on?

    Thanks,
    Simon.

  26. Simon J says:

    Hi Felix,

    I’ve tried installing the latest IE & FF flash player on another PC and I no longer get the debugger popup. The application with no options works but the examples with query strings don’t pull any images from flickr. All I get is a message saying “transferring images from API flickr” but nothing appears. This is true for both IE & FF. Any ideas?

    Thanks,
    Simon.

  27. Sam says:

    Hey Felix,
    Simon is right, it keeps trying to open a debug session (I’m a flex developer so I have the debug player installed), perhaps you uploaded the debug version of your file by accident?

    Sam

  28. Felix Turner says:

    Hi,

    I had an old API key in the last SWF which was recently disabled. Should be fixed now (you need to clear your cache to get the latest SWF). Please leave a comment if you are still seeing a problem.

  29. […] I was sent a pretty interesting link to a photo app that does have some potential. TiltView shows a bunch of photos in a grid, the twist is that the images can twist. When you click on an image it fills the screen. That in itself isn’t that special, but I think if you took that grid and multiplied it a couple times it could add some value to finding the image that you’re looking for. You can read more about TiltViewer on their blog at Airtight News. […]

  30. Alarm says:

    great job. how buy this file ?

  31. […] Felix Turner di Airtight Interactive è un creativo da tenere d’occhio. Dopo SimpleViewer e AutoViewer, due fra le fotogallery in flash più usate ed apprezzate, il ragazzo sta tirando fuori dal cilindro una nuova invenzione. […]

  32. […] Felix Turner di Airtight Interactive è un creativo da tenere d’occhio. Dopo SimpleViewer e AutoViewer, due fra le fotogallery in flash più usate ed apprezzate, il ragazzo sta tirando fuori dal cilindro una nuova invenzione. […]

  33. I would be really interested in using it for a few clients websites. Are you planning on a commercial version?

  34. Jimmy says:

    I previously used your simple and kewl SimpleViewer to view photos.

    Are you planning a similar flash 3D Flash Image Browser for Smugmug’s “community”?

    Perhaps also something personal, like http://flickr.flashapis.com/.

  35. Dave says:

    Really great !
    Strangely I succeded only once to display my own flickr photos.
    Since yesterday evening, it doesn’t work anymore…
    Too bad.
    Keep on going anyway.

  36. […] Airtight Interactive bring to us Tilt Viewer, a new way to browse Flickr photos in a 3D space (instructions here). Also check out their other product SimpleViewer which I use for my photos (has not been updated lately). […]

  37. Very, very interesting !

    One thing : If there are several pages, you have to clic on the round arrow at the bottow of the page to go forward. Is there a away to go backward ?

    Thanks for your great job !

  38. […] TiltViewer是一个3Dæ–¹å¼?查看Flickr上图片的æœ?务。via 其采用Away3D这款Flashå¹³å?°çš„3D引擎æ?­å»ºï¼Œæ?¥æ˜¾ç¤ºFlcikr上7天内最热门的照片。å?¯ä»¥é€šè¿‡ç§»åŠ¨é¼ æ ‡æ?¥æ—‹è½¬è§†è§’,点击图片则放大,å?Œæ—¶å?¯ä»¥æŸ¥çœ‹å›¾ç‰‡çš„ä¿¡æ?¯ã€‚很简å?•ï¼Œä½†å¾ˆæ¼‚亮。本æ?¥å?ªæƒ³æˆªä¸€ä¸ªå›¾å?šä»‹ç»?,但下é?¢æ— æ„?中看到的这张照片,å?´è®©äººå¾ˆæ„ŸåŠ¨ã€‚ 相爱æ‰?是幸ç¦?。 […]

  39. […] TiltViewerã?¯3Dæ–¹å¼?ã?§Flickr上ã?®ç”»åƒ?を見れるサービスã?§ã?™ã€‚via […]

  40. […] Lately I was searching for some plugin for my blog, I found this. That guy must be a “genius”. Envy him […]

  41. Alarm says:

    hi,
    Realy great job. How i download this file 🙂

  42. BillyWarhol says:

    Slick Viewr*

    Ironically i’m working on a Uwaycoolr Web3D.0 app*

    I’ll give U Folks a Shout*

    If Slide + RockYou + Flektor are getting all this attention – they ain’t seen nothin’ yet*

    ;PPP

  43. Rob says:

    Hey Felix

    you may be interested to know that Away3d now supports individual object containers, with the addition of an ownCanvas property on the Object3D class. This allows things like filters and blendModes to be applied at the 3d object level. check out site for more info!

    cheers

    Rob

    away3d.com

  44. ember says:

    Wow. I’m really digging this too! Very intuitive and one of the best image viewers ive seen in a while! =)

  45. amarghosh says:

    when i used ownCanvas = true and added filters to a cube along with
    view.renderer = Renderer.CORRECT_Z_ORDER, the filter effect was there but the z-sorting which was working fine till then is not working… doesn’t ownCanvas support CORRECT_Z_ORDER?

  46. Matty McD says:

    Love it, love it, love it!!! I think it is fabulous. I am curious however to see if there will ever be a TiltViewer exporter plugin for Lightroom…

  47. IceBone says:

    Excellent app, it really does add depth to browsing a portfolio. But like it’s been said before, would it be possible to have a localized version of Tiltviewer that wasn’t locked onto flickr, just like simple viewer and autoviewer?

    Stay excellent!

  48. Felix Turner says:

    Due to popular demand, there is now a free version of TiltViewer you can download for use on your own website. Get it here: http://www.airtightinteractive.com/projects/tiltviewer/

  49. Joel Hart says:

    This is really amazing guys! fantastic! I think I have a novel concept employing this idea that could be a huge success. Drop me an email, I’d like to chat,.

  50. zinderud says:

    Looks Great!
    Love it, Thanks
    zinderud

  51. Really great !
    Strangely I succeded only once to display my own flickr photos.
    Since yesterday evening, it doesn’t work anymore…
    Too bad.
    Keep on going anyway

  52. Olive White says:

    Fantastic tool! I currently use it on my website!

    Thanks you so much airtightinteractive !

  53. Hej Världen Virtual Reality Idea Competition…

    I won the idea generation competition at Hej Världen event by my “Virtual Sales Representatives” project. The topic of the event was “Virtual Reality” and its effects to our daily life and future. I think the virtual reality …

  54. dr.archik says:

    Hello ! Firstly – Thanks you for that glallry….
    I am from russia, sory for ?y English…
    I use gallery for images from the personal site.
    I need to pass in the tags in of “gallery.xml”
    russian encoding (windows-1251) the cyrillic symbols
    and in the:
    cyrillic symbols to

    How can i do that, without “TiltViewer.FLA” file ?….
    In the
    In all other files I changed the coding to – “windows-1251” but is not work :(…
    It can be necessary to add at line in the “swfobject.js” file russian symbols – sa that [A-Za-z]
    but where them to enter ?
    …. thanks

  55. dr.archik says:

    Hello ! Firstly – Thanks you for that glallry….
    I am from russia, sory for ?y English…
    I use gallery for images from the personal site.
    I need to pass in the tags in of “gallery.xml”
    russian encoding (windows-1251) the cyrillic symbols
    and in the:
    cyrillic symbols to

    How can i do that, without “TiltViewer.FLA” file ?….
    In the
    In all other files I changed the coding to – “windows-1251” but is not work :(…
    It can be necessary to add at line in the “swfobject.js” file russian symbols – sa that [A-Za-z]
    but where them to enter ?
    …. thanks

  56. Fu Hoang says:

    Hi,
    the tilt viewer is amazing, but i’m having problems viewing it internet explorer 6 and 7.
    Is there any hack code or any additional code where i can embedded on to my code so it could be shown on the internet explorer browser?

  57. Software Freedom Day…

    Hej all,
    Welcome back again and we hope you had a great summer and ready for the exciting events for 2008-2009 seoson.
    Our first event will be at 20th of September in Lindstedtsvägen 3 in KTH main campus.
    Software Freedom Day (SFD) is a worldwide cele…

  58. williexcc says:

    Thats really great… but I dont know how use this tool in lightroom 2… anyone can help me?.. I put the complete files in “webengines” files in lightroom directory but still does’nt work… please help me

  59. Ericsson Business Case Competition…

    Last week was “China Week” at KTH and in order to celebrate it, students organized lots of different activities. There were many different kinds of public lectures, career days, parties, dinners and business case competition about the Erics…

  60. James says:

    I currently use Lightroom 2.1 for my raw conversions to jpg, and simply loved the tilt viewer is there a way to automate the process in using tilt viewer, as I sometimes would like to add a few hundred plus pictures.

    From what I was reading in the readme was that you have to make individual entries into the xml and html.. this woudl be a daunting task. Perhaps I am overlooking something.

    I would love for it to be intergrated directly in lightroom like the other viewers are.

    If anyone has some info, I would love an email regarding this.

    Best Regards,

    James DeLucia

  61. fry says:

    theres a lack of color on tiltviewer and tilt viewer pro, the images dont look exactly with the same color of the original file, anybody knows how to fix this problem?? i use an xml gallery, and the set on index are 1024. thanks!!

  62. Looks Great!
    Love it, Thanks

  63. flavio says:

    how do I put tiltviewer on my blog?

  64. thank you for sharing this one

Leave a Reply to ember Cancel reply

Your email address will not be published. Required fields are marked *