Snoto Photo

In my tradition of coming up with application names that start with "sn", I introduce to you, Snoto Photo.

Snoto Photo is a Flickr application built on Adobe AIR using Mootools. It loads up your latest photos, allowing you to view larger versions of them, do a slideshow, or load up the photos from any of your contacts.

The goal of this is not to create a Flickr client that "does it all". It was put together as a reference application for anybody interested in learning more about Adobe AIR. Snoto has been released under a Creative Commons license, so it's available for you to take and extend how you wish. The link to the source code is included at the bottom of the Snoto page.


As it turns out, Mootools was, for the most part, a pleasure to use within AIR. The latest version works fine without needing to create child sandboxes (as does jQuery, ExtJS and most of YUI).

I modularized the application which, after some initial hurdles figuring things out with the API and authentication, made the application fairly straightforward to put together. It's at a stage now where photosets and groups could be added quite easily within a few hours.

Probably the biggest hurdle in taking a modularized approach is ensuring that objects are bound properly to event handlers and callback functions. Browsing through the code, you'll see I've made heavy use of bind.

Adobe AIR

From the AIR API, I haven't gone hogwild but rather kept it simple. You can see use of nativeWindow, context menu and EncryptedLocalStore.

Having access to Webkit made styling the interface very straightforward. Like Snitter, it's a combination of background images, PNG images, and some CSS3/border-radius to round things out.

I learned from my mistakes with Snitter and went with the standard OS chrome instead of trying to build something custom. As a result, the application feels performant, even at larger sizes.

Take a spin

Even if you don't have any plans to build an AIR app, feel free to give the application a try. I'll be adding some features when I have time.

Published February 29, 2008
Categorized as Adobe AIR
Short URL:


22 Comments · RSS feed
Wilfred Nas said on February 29, 2008

Thanx in advance for providing the source code, this will help starting AIR developers like meself a lot.

Christopher Hill said on February 29, 2008

Always good to see another Flickr application. I have yet to find time to look into AIR, so I make take a nose at the source some time.

Matthew Keefe said on February 29, 2008

Awesome application Jon, I am equally amazed at sending the source out too :) We developers thank you!

Keeto said on February 29, 2008

Snoto Photo?.. I thought you'd go for something like Snicker.. Hahaha.. Great work! You're lucky AIR 1.0 is already out. Beta 3 was a headache when it comes to using the Mootools Fx bundles.. Glad it's all fixed now.

Phil Nash said on February 29, 2008

I have been planning on looking into AIR, particularly combined with Flickr as it happens, so this is brilliant. I just have to make sure I don't lose the whole weekend diving into this code and trying stuff myself!


Lim Chee Aun said on February 29, 2008

Nice app.. 'document.onmousemove' seems like a hack? :D
And also, for some reasons, the image loading seems buggy for slow connections..

Jonathan Snook said on February 29, 2008

@Keeto: dang, that is good. :) Ahwell, maybe next time!

@Lim Chee Aun: a hack? bah! I would like to improve the image loading. Right now it just uses an image.onload but I'd like to switch it up to using the FileStream, especially to cache images locally. The slideshow especially would benefit from this.

Jeff L said on February 29, 2008

First thing I though too...."Snoto Photo? Shouldn't it be Snickr?"

Awesome that you are doing this stuff and releasing it to the wild, though.

Jim Amos said on February 29, 2008

Should there not be a link to download a .air application file?

Jonathan Snook said on February 29, 2008

@Jim Amos: you should be able to download the application via the Flash badge. Otherwise, you can grab it directly from here.

Tim said on February 29, 2008

A little bug-report already: You can't change the user, if you've authorized one already. Tried that today, but it doesn't recognized my different username, when I typed it in. It ends up at the first one I entered...

Arthur said on February 29, 2008

Thanks a lot for releasing the source code. I've just recently started with AIR and the snitter source helped me much more than those Adobe Developer Connection articles.

Jonathan Snook said on February 29, 2008

@Tim: right now, there's no way to untie a Snoto username from a Flickr account except to un-authorize the app at the Flickr level. However, in trying to replicate your bug, I did find that it won't let you complete the authentication of a new account under a certain circumstance. It actually requires the app to be closed, restarted and the authentication process to be redone in order for it to work.

Rinaldo said on February 29, 2008

As others said previously, thank you for releasing this project!. I suppose that you used Mootools because you already tested AIR with the other frameworks that you mentioned in the post :).

Shawn said on March 01, 2008

Big thanks. This is encouragement enough to help me dive into AIR.

Phim Online said on March 02, 2008

Thanks for the great tip.

minute44 said on March 04, 2008

AIR is really looking like a huge thing now. The ability to update your flickr from the desktop could be very handy. Obviously there are things like picassa but this has beauty in its simplicity. Drag and drop goodness.

A cool feature would be a keyboard shortcut that is used when snoto is in the system tray that opens up a small box that you can drag a photo into quickly.

This could also be useful in Snitter. A keyboard shortcut that opens a simple text box above the system tray. You type, hit return and you're done.

Jasja ter Horst said on March 11, 2008

Yeah this is getting really interesting. To bad I'm not a code lover, but I will keep track of these developments. The ability to communicate form your local environment (desktop) to web applications still has a huge potential.

Milwaukee, WI Web said on March 13, 2008

Looks great- I'm looking at creating something very similiar for a "photoblog" site we're working on.

Aron said on April 02, 2008

great app

Max said on April 08, 2008

Thank you very much I liked the application it really makes a difference in viewing with snotophoto.

Jim said on September 20, 2008

Great feature John, thanks very much, I just love this application

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.