Update 3:
This is a very old page imported from my previous blog. If there is missing content below or anything that doesn’t make sense then please check the page on my old blog.
Update 2:
For the latest up to date information about Flashr please check out the new Flashr microsite
Update:
This example will no longer work as-is – you will need to update your Flashr files as described here.
I’ve put together a very simple example which demonstrates how easy it is to talk to the flickr API using Flashr.
First up, here is the finished product. It basically connects to flickr.com and gets a list of the 16 most recent photos for a given user (me in this case) and displays them all in a nice little grid.
The code to create this simple movie is extremely simple… Here it is in it’s entirety:
* Class: UserRecentPhotos
*
* Author:
* Kelvin Luck
*
* See Also:
* http ://www.kelvinluck.com/projects/flashr-a-flickr-api-wrapper-for-flash
*/
import com.kelvinluck.flickr.Flickr;
import com.kelvinluck.flickr.FlickrResponseListener;
import com.kelvinluck.flickr.Person;
import com.kelvinluck.flickr.Photo;
import com.kelvinluck.util.LogWrapper;
import com.dynamicflash.utils.Delegate;
class com.kelvinluck.flickr.example.UserRecentPhotos
{
/**
* Variable: apiKey
* Your API Key.
*
* See Also:
* http ://www.flickr.com/services/api/misc.api_keys.html
**/
var apiKey:String = "REPLACE_ME";
/**
* Variable: userNsid
* The NSID of the user whose photos you want to get
**/
var userNsid:String = "51035610516@N01";
/**
* Variable: _target
* The MovieClip to attach the photo thumbnails to
**/
var _target:MovieClip;
/**
* Function: UserRecentPhotos
* Constructor
**/
function UserRecentPhotos(target:MovieClip)
{
Stage.scaleMode = "noScale";
// initalise logging to Flash's output window
LogWrapper.getInstance().init();
LogWrapper.getInstance().addTracePublisher();
_target= target;
var _flickr:Flickr = Flickr.getFlickr();
_flickr.apiKey = apiKey;
var _flickrResponseListener:FlickrResponseListener = new FlickrResponseListener();
_flickrResponseListener.setSuppressOutput(true);
_flickrResponseListener.onPeopleGetPublicPhotos = Delegate.create(this, onPeopleGetPublicPhotos);
_flickr.peopleGetPublicPhotos(userNsid, null, 16,1);
}
/**
* Function: onPeopleGetPublicPhotos
* Called when the _flickrResponseListener hears a response to flikr.people.getPublicPhotos
*
* Parameters:
* p - The person whose photos you just got.
**/
function onPeopleGetPublicPhotos(p:Person):Void
{
var photosArray:Array = p.getPhotos();
var userNsid:String = p.nsid;
for (var i:Number=0; i< photosarray .length; i++) {
var thisPhoto:Photo = Photo(photosArray[i]);
// create a movieclip to load the photo into
var mc:MovieClip = _target.createEmptyMovieClip("photo"+i, i);
// position the clips so they form a nice grid
mc._x = 1 + (i%4) * 76;
mc._y = 1 + Math.floor(i/4) * 76;
// create a nested movieclip so that our onPress isn't overwritten by the jpg as it loads
mc.createEmptyMovieClip("jpgHolder", 1);
// and load the jpeg into it
mc.jpgHolder.loadMovie(thisPhoto.thumbnailUrl);
mc.photo = thisPhoto;
// add the onPress to this movieclip to link to the relevant photo on flickr.com
mc.onPress = function()
{
getURL(this["photo"].photoPageUrl, "_blank");
};
}
}
/**
* Function: main
* Entrypoint to the application.
**/
public static function main():Void
{
var u:UserRecentPhotos = new UserRecentPhotos(_root);
}
/**
* Function: toString
**/
public function toString():String
{
return "[com.kelvinluck.flickr.example.UserRecentPhotos]";
}
}
As you can see, an instance of Flickr and an instance of FlickrResponseListener are created. Then _flickr.peopleGetPublicPhotos is called. When a response is returned by flickr.com, _flickrResponseListener.onPeopleGetPublicPhotos is triggered. This function is passed a Person object. We can get this person’s photos with a simple call to Person.getPhotos. We then loop over those photos loading them into movieclips.
And that’s how easy it is! You can download the files used in this demo from here – there is instructions for building with MTASC or the Flash IDE. The file that you will be interested in looking at is com.kelvinluck.flickr.example.UserRecentPhotos.as.
Update 2:
Petit as written a step by step tutorial showing how to use this code as a basis for a copy of the flickr badge.
48 Comments, Comment or Ping
I tried the test app, and it doesn’t seem to heave MD5 in it. Any ideas?
srccomkelvinluckflickrFlickr.as: Line 495: There is no method with the name ‘MD5’.
return MD5.calculate(signature);
Total ActionScript Errors: 1 Reported Errors: 1
September 29th, 2005
Hi,
You will need to go to the Flashr page and look under requirements…
Alternatively, yesterday I released a new version via Subversion with a packaged MD5 class – more info on the here – from the Flashr mailing list
Cheers,
September 30th, 2005
I’m on a mac and I can’t get it to work. I installed the ASCrypt extension and tried to preview the files you have here and nothing happens. I’m kind of a n00b at this kind of stuff. Can you do a step-by-step on what exactly I’m supposed to do/install? Thanks!
October 20th, 2005
Hi,
How are you trying to preview the files? Are you opening up the fla in Flash? Are you getting any errors?
Please join the mailing list and ask the question there with a few more details of what you are doing (which file you are opening in what, what happens when you compile it, any errors etc),
Cheers :)
October 20th, 2005
In the new version via Subversion with a packaged MD5 class – you need to change the as code from getUrl() to getURL() as the first syntax is incorrect / doesnt work. Might put off / confuse new flash coders etc.
I’ve done it many times myself!!!
Tucking into Flashr as we speak, I am a Flash UI Consultant / Developer!
Will be in touch.
December 8th, 2005
Hi,
Cheers for the headsup – not sure where the lowercase URL crept in from… I’ll fix it when I get a moment on my machine at home…
Enjoy Flashr and make sure to let me know what you make with it :)
December 8th, 2005
Hi, sorry for being the one asking stupid questions but….
I’m trying to get your example to work, but I end up with an black swf.. I’m compiling the example using the flash mx2004 interface, I get no errors. But the images are not loading.
January 5th, 2006
Ok so I need to fiddle around with API key and export for the right flash version… It is working now. Great stuff!!
January 5th, 2006
Cool – glad you figured it out so quickly!
Have fun :)
January 5th, 2006
Thanks Kelvin, for a great piece of work! Check out my first little app. at http://pentdego.com
Keep up the great work.
January 11th, 2006
Hello Kelvin,
I’m learning and experimenting with your example. But the ony thing which doesn’t work is that when you click on a thumbnail they all go to the last photo in the grid. when i trace(thisPhoto.photoPageUrl);
in the function:
onPeopleGetPublicPhotos
it works well but when i do the same in the onPress function the var thisPhoto is always the last one. Do you know what’s wrong, or isn’t this wrong after all.
Cheers from Amsterdam,
Marien
January 15th, 2006
Hi Marien,
Sorry – my bad! I’ve fixed the problem you found – the new code is above,
Cheers,
Kelvin :)
January 15th, 2006
Hi Kelvin,
Newbie here. Trying to get the viewer to work but getting a black screen. I have changed the keys in the .as file and exported using Flash but still no luck.
Thanks,
rwg
January 22nd, 2006
Hi Roger,
Sorry for the slow response… Are you still having issues? I just downloaded the files and exported without any problems… Do you see anything in Flash’s output window? Does it work if you leave my API Key and user id in? What version of Flash are you exporting from?
If you are still having issues then please join the mailing list where we will be able to help you out…
Thanks,
January 26th, 2006
I also have the MD5 problem…
*Error* E:DataClassME310FlashFlashrRecentPhotossrccomkelvinluckflickrFlickr.as: Line 495: There is no method with the name ‘MD5’.
return MD5.calculate(signature);
Total ActionScript Errors: 1 Reported Errors: 1
March 3rd, 2006
Hi Kelvin,
I’m really inexperienced with using external actionscript. Could you tell me which folder the files go in? Thanks!
March 4th, 2006
Hi Guys,
Re. the MD5 problem, this demo was actually made using an old version of Flashr which had a reliance on an extra library to provide MD5 hashing to generate authenticated flickr.com URLs. I have just re-uploaded the zip file and it now uses a library which is included in the zip. Please download and try again.
Nick – the files can go in any folder, the important thing is that they go in the same folders relative to each other.
Hope this helps,
Thanks,
March 4th, 2006
Kelvin, when I try to run the file in the zip, these errors occur:
*Error* C:Documents and SettingsNickMy DocumentsDownloadedFlashrRecentPhotosFlashrRecentPhotossrccomkelvinluckflickrFlickr.as: Line 86: The name of this class, ‘com.kelvinluck.flickr.Flickr’, conflicts with the name of another class that was loaded, ‘com.kelvinluck.flickr.Flickr’.
class com.kelvinluck.flickr.Flickr {
*Warning* C:Documents and SettingsNickMy DocumentsDownloadedFlashrRecentPhotosFlashrRecentPhotossrccomkelvinluckflickrFlickrResponseListener.as: Line 53: There is no class or package with the name ‘com.kelvinluck.flickr.Flickr’ found in package ‘com.kelvinluck.flickr’.
Flickr.getFlickr().addEventListener(“onAPIResponse”, this);
*Warning* C:Documents and SettingsNickMy DocumentsDownloadedFlashrRecentPhotosFlashrRecentPhotossrccomkelvinluckflickrFlickrResponseListener.as: Line 661: There is no class or package with the name ‘com.kelvinluck.flickr.Flickr’ found in package ‘com.kelvinluck.flickr’.
LogWrapper.getLog().info(Flickr.getFlickr().authUser);
*Warning* C:Documents and SettingsNickMy DocumentsDownloadedFlashrRecentPhotosFlashrRecentPhotossrccomkelvinluckflickrFlickrResponseListener.as: Line 1514: There is no class or package with the name ‘com.kelvinluck.flickr.Flickr’ found in package ‘com.kelvinluck.flickr’.
if (eventObject.status == Flickr.STATUS_OK) {
*Warning* C:Documents and SettingsNickMy DocumentsDownloadedFlashrRecentPhotosFlashrRecentPhotossrccomkelvinluckflickrPhoto.as: Line 439: There is no class or package with the name ‘com.kelvinluck.flickr.Flickr’ found in package ‘com.kelvinluck.flickr’.
Flickr.getFlickr().authUser.addTag(thisTag);
Total ActionScript Errors: 5 Reported Errors: 5
What does this mean?
March 4th, 2006
Hmm – looks like there may be an issue with your ASO files not being deleted (this can happen when you open files that were created in different time zones). Here is a description of the problem – to fix it grab an the ASO Cache clearing commands and install and run “Clear ASO Cache and Compile”.
If you have any further problems please ask on the mailing list which is a better place for getting help with Flashr,
Cheers,
March 4th, 2006
Hello Kelvin, weird issue… my .fla will compile and work on a PC (both the .swf in the standalone projector and in browser) but not on a Mac, except for a PC compiled swf in browser. The same .fla will NOT compile on my Mac or run in the standalone! Same code, too… any ideas?
I get the Mac compile error: *Error* Scene=Scene 1, layer=Layer 1, frame=1:Line 9: The class or interface ‘Flickr’ could not be loaded. var _flickr:Flickr = Flickr.getFlickr(); Total ActionScript Errors: 1 Reported Errors: 1
thanks,
March 27th, 2006
How do yo find the users NSID?
March 27th, 2006
Kelvin, I reinstalled OSX and Flash and now everything is all good. Must have been a permissions problem or whatnot. Thanks-gb
March 27th, 2006
Hi guys, sorry for the slow response – just got back from Holiday :)
@Geoff – glad it sorted itself out :)
@Kyle – there are a number of ways… If you want to do it in Flashr then check out peopleFindByEmail or peopleFindByUsername.
Cheers,
Kelvin
April 3rd, 2006
Thank you Kevin, this is really a great example. I used it in my blog and it works!!! Thank you a lot….
April 7th, 2006
is there any way to getEMail by Username?
i put some more features of this demo.
look over here:
http://data.insnet.de/experiments/flickr/imageByUsername.html
June 3rd, 2006
Hi,
There isn’t a way to get Email by username. I guess this would be an invasion of Flickr users’ privacy so the guys at Flickr left it out…
June 4th, 2006
Hello,
Thanks a lot for your brilliant work, it’s really helpful and generate a lot of creativity.
I’m playing with it, and got a few problems:
I don’t get any picture when swf is online. Even you embed flash on this page is black and empty (pc / mac, firefox / IE Flash player 9) but it works fine when swf generated in Flash. Is it only me or did flickr change something in their API recently ? there anything I can do?
Also, I’m trying to “loadmovie” into an other swf, and I probably didn’t use the _target thing properly to call the function, as the loaded pics are always on _root.
I tried manually by changing UserRecentPhotos.as:
var mc:MovieClip = _target.createEmptyMovieClip(“photo”+i, i);
to
var mc:MovieClip = _root.site.theleft.loadpics.createEmptyMovieClip(“photo”+i, i);
and it worked fine. What is the best way to do this ?
Thanks a lot
Jonaie
August 24th, 2006
Hi,
Glad you like Flashr! I’ve literally just this minute done a post which explains the problem you are having with no images showing up.
Re. your other problem, I’m not sure I quite understand you – can you clarify a little?
Cheers,
August 24th, 2006
Hi, verry good tool – thank you. greets Sven
February 6th, 2007
hi,
I tried making a mod of this viewer and it works great when launched locally. However, when I host it in photobucket for web use, it can seem to load the images.
please check this link
http://i26.photobucket.com/albums/c135/schmuck03/gioflickr.swf
try also to save it and launch locally, should work.
how do I make it work online??
thanks
February 11th, 2007
Hi,
Did you check out this article? It sounds like it has the solution to your problem,
Cheers,
February 12th, 2007
This still isn’t working for me on my server.
Changed line 112 in Flickr.as:
private var _AUTH_ENDPOINT:String = “http://flickr.com/services/auth/”;
to
private var _AUTH_ENDPOINT:String = “http://api.flickr.com/services/auth/”;
and changed line 274 in Flickr.as from:
_REST_ENDPOINT = “http://www.flickr.com/services/rest/”;
to
_REST_ENDPOINT = “http://api.flickr.com/services/rest/”;
Safari’s activity window states that my doc can’t find crossdomain.xml on the flickr server.
Any help would be appreciated.
Thanks
February 12th, 2007
Hmm – did you recompile and re-upload your swf after doing the changes? Those changes should definitely fix the problem but when I look at the URL you give above I still see it trying to connect to http://www.flickr.com…
February 12th, 2007
Hello Mr. Luck, I try to work with “UserRecentPhotos” and local all the nice flickr things will work. But nothing will work on a server… By the way, I dont see anything in your example in the top.
Can you help please? Best from Berlin, Alex
June 21st, 2007
Hi Alex,
Did you see this link at the top of the page? It should tell you how to fix it!
Also, the information on this page is based on an old version of Flashr. You should check out the newest versions of Flashr / which are better… It shouldn’t be too much work to change the code here to work with the new version…
Cheers,
Kelvin :)
June 23rd, 2007
I got the flashr to work within flash. I can preview the swf and it looks fine. But when i export it to a folder with all corresponding folders/as files it doesnt work. Any thoughts?
January 4th, 2008
Hi Chuck,
That sounds like a security error of some kind. What version of Flashr are you using? Are you using the files downloaded from this page? If so then you need to take into account this change to the security model.
I’d recommend getting the latest version of Flashr and checking out the tutorials on the new microsite. If you are still having difficulties then please ask on the flashr mailing list.
Hope that helps,
Kelvin :)
January 5th, 2008
Is there a way to force a specific photoset with this example?
I have tried but can’t get it to cooperate :(
March 17th, 2008
Never mind, I’m tweaking the barcamp example now.
Great stuff BTW :D
March 19th, 2008
Hi Nik,
Sorry for the slow response. And cool that you’ve discovered the barcamp example – that is built on a much newer and better version of Flashr than this…
If you want to get photos from a specific photoset then you should look at the photosetsGetPhotos function,
Cheers,
Kelvin :)
March 20th, 2008
Thanks Kelvin :)
March 28th, 2008
Really nice Tool !
May 11th, 2008
Thanks Kelvin, for a great piece of work! Best regards
June 10th, 2008
Thanks for this usefull Tool.
June 12th, 2008
hi kelvin,
flashr is great and i’m so impressed with how extensive your documentation is. but i had the same question as Nik about getting the gallery to show only certain sets. i looked at the function you mentioned in the link in response to him, and i tried placing that in my code, but i may need a little more instructions. sorry, i’m really not much of a coder.
here is what i put in:
//
function photosetsGetPhotos(photosetId:String =”72157606185185240”):FlashrRequest
//
i know there is probably some more code i need to put in, but i’m not really sure what. if you could explain it a little more, that would be great.
i have gotten the api key and everything else to work just fine so that it is showing my flickr photos.
thanks!
July 15th, 2008
Hi Jearly,
I’d recommend reading Colin Moock’s EAS2 to learn some more about actionscript 2…
Basically in the example above I call:
_flickr.peopleGetPublicPhotos(userNsid, null, 16,1);
Instead you need to call the photosetsGetPhotos function like so:
_flickr.photosetsGetPhotos(‘72157606185185240’);
However, you will also have to set up a listener for the corresponding function (onPhotosetsGetPhotos).
You should make sure you are using the latest version of Flashr too – the version used on this page is very out of date…
Hope that helps :)
July 21st, 2008
thanks fo this usefull api. i love it :-) Greetings
November 10th, 2009
Hi everybody,
thanks for this great tool. Love it :-)
Regards
January 14th, 2010
Reply to “Flashr code example”