Flickr Cinematic Zoom Slideshow
Flickr Cinematic Zoom Slideshow
Dec 19Update : Looks like this type of cinematic effect has a name: Ken Burns Effect .. the difference is that this app zooms and pans not according to any logic, like showing faces on detail.
As a Xmas present and following one of my latest post about using Openlaszlo‘s Flickr lib I’ve decide to offer the generic flash and it’s source of Masterfoot and Comics Sketch flash component to slideshow photos from Flickr with a zoom cinematic effect.
Here is an example:
I called it Zoomer. What it does is you set the user Flickr NSID, the desired tags and some other setting for timings and quantities and it starts showing those photos and zooming them in a very “classy” and cool style as you can see from above.
It’s really easy to use and using the combination of tags you can dynamically present a set of photos on a determined page.At Masterfoot (ok.. I know it’s in Portuguese.. but bare with me) we will use it so that only photos on the tournament you are in or the team you are viewing is shown. To do so with this widget you only need to pass some simple args for you flash and tag it all on Flickr. Nice!How it works and paraments ? ok.. there there..On the Flash file itself :
- flickr_tags : a string with tags separated by commas.. like ’2007,march,music,live’ (default: zoomer)
- flickr_max_photos : is the number of maximum photos it will download. You can set it for a really large number and it will only download the one found of course (default: 5)
- flickr_transition : number of milliseconds changing a photo.. that is.. the time it take on the smooth transition (default: 1800 …or 1,8 secs)
- flickr_interval : number of milliseconds between photos. The time a photo is shown (default: 7000 … 7 secs)
- flickr_nsid : yeah.. the Flickr NSID (default: some not-so-important guy)
- flickr_apikey : your Flickr API Key (default:SET IT!) please, don’t steal mine.. get your own.. it’s free
as this source and widget
If you are going to use the source it’s almost the same. Here is the lib class and it’s attributes.
<class name="slideFlickr" extends="view" clip="true" >
<attribute name="apikey" value="SET IT!" type="string"/>
<attribute name="tags" value="zoomer" type="string"/>
<attribute name="userNSID" value="74022912@N00" type="string"/>
<attribute name="photoSize" value="b" type="string"/>
<attribute name="interval" value="5000" type="number"/>
<attribute name="maxPhotos" type="number"/>
<attribute name="transition" value="2000" type="number"/>
You should understand it with no sweat. Just remember to get your Flickr API Key. The ‘photoSize’ is the size you will import the photos according to Flickr size denominations. For this zoom effect I always recomend b size .. for BIG!
As for the behavior, this component is somehow optimized as each photo will only be downloaded once and only when it’s needed (I’ve defined that to when the previous photo starts to get shown). It also zooms in a random fashion, if you what to dig in and create some kind of algorithm so it is smarter .. go ahead.. but give me feedback later.. I’d love to see cool stuff.
Both places I’ve used it makes the site look really good, so if you know someone who can profit from it, send him message.
Oh.. Here’s the Package with the Flash file and the Source. It’s free and you can change it and use it as you want.
This is a simple and elegant application, which leverages the web services and APIs in an incremental yet revolutionary way. Thank you for publishing this, I look forward to hacking it!
Wow, this is such a great widget that I have integrated it into Qrowd. Thanks for making the code free to use!
The advantage of Qrowd’s tool, is that any web data source can now feed the widget with photos to display.
You can access a sample widget here (currently at the top of the page): http://www.qrowd.com/browse.htm
As a Qrowd widget, other people can access the source code online and make any customizations they desire. I made the photo delay and transition times configurable, but if more control is needed a person with Javascript and XML knowledge can tweak the widget further.
You’ll need to request a beta account if you want to see how Qrowd’s visual editor feeds with widget with data, or to access/modify the integrated widget’s source code.
Thanks, Tiago!
Robert Yeager
http://www.qrowd.com
http://www.cooqy.com
This is exactly the thing I need, but I can’t seem to get it to work with my NSID. I’ve entered my API key and my NSID as parameters, but no photos show up. Here’s a test page where I’ve installed the code:
http://www.theseminal.com/wiw/zoomer.html
Any ideas on why this is not showing any photos?
Hi Jason,
I’ve seen you html source.. I think you are missing the Tags parameter.
The widget needs it to retrieve the photos
flickr_tags : a string with tags separated by commas.. like ‘2007,march,music,live’ (default: zoomer)
Other parameters can be important.. so check them out.
Thanks for using it.
Ah! Of course! I feel so stupid.
I’ve added a tag parameter, but I think right now, the photoSize parameter is stopping me from seeing any photos, because my photos lack the large size. Can I set the size by passing the .swf parameters? If so, what’s the syntax? If not, how can I edit the source?
hmm… know I’m the one feeling stupid for not enabling the photo size parameter on the .swf object.
To change this, you have to download OpenLaszlo, download the widget source in this post,, change the parameter on the source (or even better, add it to a .swf parameter) and compile it.
It’s not as hard as it seems..
and you wil learn something.
If you have trouble, send me a mail so I can help you out.
Alright, will do. I played around with compiling zoomer the other day, and didn’t have any luck, but I think that’s because of my tag and photo size settings. We’ll see what I can come up with…
I think I’m having issues compiling in OpenLaszlo. As a test, I simply opened up the source file in my OpenLaszlo server and compiled it. I chose the SOLO option, put in the path to the /my-apps/ directory where zoomer.lzx lives, and compiled without making any changes to the code. I uploaded the flash file OpenLaszlo created to my server.
Here’s the page: http://theseminal.com/wiw/zoomer.html
At the top we have the original zoomer .swf file with my preferred parameters. No photos appear because it is calling large images, which I do not have.
The next implementation is the original zoomer.swf with all defaults. As you can see, the photos appear.
The last implementation is my newly compiled zoomer. I didn’t touch the code at all, but it doesn’t seem to have compiled correctly.
Any thoughts or tips?
this is such a great widget that I have integrated it into Qrowd