Flickr Integration

June 2nd, 2010

On my most recent project, we launched the website with a media page that had thumbnail images that launched larger images in a Lightbox format (btw I freakin’ love Lightbox).  This looked pretty good, but the problem was the ongoing ability for Matt (the client & my bro-in-law) to upload photo’s on his own.  I could have built a CMS that would have allowed him to upload pictures to the image directory, but what wasn’t possible in the initial configuration was the ability for him to upload the thumbnails and modify those pic placeholders on the media page directly.

So, once we launched the site, it quickly became apparent that we needed to find a better solution for displaying images and we quickly landed on a Flickr integration.  Now, if you Google ‘Flickr Integration’ you will find countless ways to do this.  Most however require the ability to modify PHP (or other server side scripting) and that simply is a skill-set that I am not comfortable with yet (it’s on my list).  So my requirement was a Flickr integration that was front-end based and required no more than the modification of HTML, CSS, JavaScript, or ActionScript (Flash).

So, here is a run-down of a few that I liked and was able to quickly implement in a test environment for Matt…

4. Roy Tanck’s Widget.  What I like about this is the nice mouse control & the uniqueness of it.  Hover to the right and the widget spins right… hover to the left and it spins left.  The speed of the spin responds to your mouse as well.  I also like how you can set background color or transparency, and also change the size of the widget.  What I don’t like about it is it seems to be fairly limiting in the number of pictures you can display and in order for some to see a full size (or decent size) view of the picture, you must click the picture which rediects the user to Flickr.  What the client didn’t like about it… well, he best described this one as “The Whirling Dervish”.  Fair enough… so we moved on to #3.

3. Flickrshow.  I am cheating a little by putting this one in the list.  I didn’t actually put together a working example of this one for Matt, but it looks very promising, all though, not yet released.  I like the feature set, the simplicity of the controls, the ability to display an entire photostream or a set.  Since it’s not yet released I will be following this one closely and I am following the developers tweets to try and stay up to date on this one.

2. Flickr Slideshow Generator.  What I liked… the ability to display an entire photostream or a set, no whirling dervish, the ability to resize the gadget, I love how you get detailed info on the pic when you click it once and then click it twice to redirect to Flickr.  What I dislike… the controls are a bit wonky with the top and bottom hover states, the gadget had an odd transparency on it when I put it on Matt’s site even though I had no transparency set.

1. The winner (for now) – Pictobrowser. What I liked… mostly everything.  Controls and layout are very nice.  Ability to change size, color background, & a number of other parameters that can be adjusted.  What I don’t like… you can’t show an entire Photostream.  You must use a set or a group tag, which is a feature most of the others offer.  I did reach out to the developer in the hopes that feature might be added in a future release… we’ll see.

I came out of this exercise with two distinct affirmations.  1. I need to work on my PHP skills.  2. I should spend a little time and build my own Flash based Flickr integration with the controls, features and presentation I want.

Check out the final product on Matt’s media page http://www.mattcordier.com/media (note, a YouTube piece is coming soon to this page).

Matt Cordier Media Page

Flash Camp Seattle Recap

May 13th, 2010

Follow the arrow

Last Friday (May 7th) I took the day off from work and did what I am sure a lot of you do, went to a day long technology conference.  Yes, I know how to party.  But not just any tech conference, this was Flash Camp… put on by the good people over at Universal Mind.

When I signed up for Flash Camp, I had no idea what to expect.  Mostly for some reason, I pictured a day long session of going through various tutorials in a classroom type setting.  This was not the case.  Rather, the entire day was listening to a series of speakers on a dizzying variety of topics.  In fact, I and every other person in attendance (60-ish) could have made it through the entire day without our precious Mac’s (& I think I saw a few PC’s too, this is Seattle).

Nerds

Nerds

The event was held at Adobe’s Seattle office complex and the parts of the complex I saw were awesome… outstanding venue!  And that’s saying a lot… my day job is in the Starbucks HQ building and it’s pretty freakin’ sweet too.

From there, the speakers came, one after the next.  Some were good, some were not so good and if you are interested in the specifics, here is a list of speakers and topics.  A strange thing happened though… the speakers and topics that were the most interesting and engaging had mostly nothing to do with Flash at all.  In fact, the guys who talked about User Experience & Design were probably the best of the day.  Two stood out, Carl Smith & Christian Saylor.  The most valuable pieces of information I got out of this day long session came from these two guys and their approach and advice to design, website usability, and how to properly engage both your customers (as a designer / developer) and your site visitors.

I’ll end the post with this.  I am not sure if Flash Camp was actually worth my $150-ish entry fee + day of vacation time (I only get 5 weeks per year).  However, they did offer a little piece of compensation in return.  Door prizes.  There were 5 or 6 door prizes to be had.  The catch… you had to stay until the very last minute to be eligible to get one of these door prizes, and well, I happened to be one of the lucky winners.  And just what were the door prizes you ask… well, there was some cool stuff…

#1 – Adobe CS5 Master Collection (value = $2600)
#2 – Adobe Flash Builder (value = $700)

and some not so cool stuff…

#3 – #6 A Universal Mind Hat (value = the pain and misery of having come so close to winning one of the 1st two prizes).  Below is the outcome.

My New Hat