PDA

View Full Version : Flickr/Google/Bing Image Search API



tcabaco
March 8th, 2010, 04:49 PM
Hi everyone,

I'm currently using the Flickr Image Search API to load the first result of a string query as a background image for my site.
Here's how it's looking so far: http://www.tiagocabaco.com/other/im2_type_wip/

The thing with Flickr though is that if you want pictures at their original or large sizes every now and then you get an error message or image saying "Image Unavailable" due to Flickr permissions and user privacy restrictions. On the other hand medium sized or detail sized images tend to get very pixelated on large monitors. I'm pretty new at this Flickr API thing so I don't know if there's a way to filter the results to show only the first one that has actual original/large size available.

Question 1) Is there a way to filter/sort through Flickr API to load only the AVAILABLE/PERMITTED images at their original/largest size?

Here's the code I have so far:


package
{
import flash.display.*;
import flash.system.LoaderContext;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import com.greensock.*;

public class FlickrBgImg extends Sprite
{
private const API_KEY:String = "5ee6afe745f7f4b6f5af147ee515fbcb";
private const API_SECRET:String = "83444680d729be3d";

private var apiSearchTerm:String = "";
private var apiUseAccount:String = null;
private var apiMaxSearchResults:int = 1;

private var apiResponse:XML;

private var searchString:String;

private var loader:URLLoader;

private var picLoader:Loader;
private var context:LoaderContext;
private var currentPic:ScalingImage;
private var pic:Bitmap;
private var loader_image:Bitmap;
private var loader_bmd:BitmapData;

public function FlickrBgImg( _string:String )
{
workOnString( _string );

searchString = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + API_KEY + "&text=" + apiSearchTerm + "&per_page=" + apiMaxSearchResults;

loader = new URLLoader(new URLRequest(searchString));
loader.addEventListener(Event.COMPLETE, flickrResponse);
}

private function workOnString( _s:String ):void
{
var str:String = _s;
apiSearchTerm = str;

for ( var i=0; i < str.length; i++ )
{
if ( str.charAt(i) == " " )
{
var newStr:String = str.split(" ").join("+");
apiSearchTerm = newStr;
}
}
}

private function flickrResponse(e:Event):void
{
loader.removeEventListener(Event.COMPLETE, flickrResponse);
loader = null;

apiResponse = new XML(e.target.data);

var imageMax:int = apiResponse.photos.photo.length();
for (var imageCounter:int = 0; imageCounter < imageMax; imageCounter++)
{
var id:String = apiResponse.photos.photo[imageCounter].@id;
var server:String = apiResponse.photos.photo[imageCounter].@server;
var farm:String = apiResponse.photos.photo[imageCounter].@farm;
var secret:String = apiResponse.photos.photo[imageCounter].@secret;

var url:String = flickrURLGenerator(id, farm, server, secret);

picLoader = new Loader();
context = new LoaderContext();
context.checkPolicyFile = true;
picLoader.load(new URLRequest(url), context);
picLoader.contentLoaderInfo.addEventListener(Event .COMPLETE, picLoaded);
}
}

private function picLoaded( e:Event ):void
{
loader_image = Bitmap( picLoader.content );
loader_bmd = loader_image.bitmapData;

pic = new Bitmap( loader_bmd );
pic.smoothing = true;
currentPic = new ScalingImage( pic );
addChild( currentPic );

TweenLite.from( currentPic, 2, { alpha:0 } );
}

private function flickrURLGenerator(_id:String, _farm:String, _server:String, _secret:String):String
{
var url:String = "http://farm" + _farm + ".static.flickr.com/" + _server + "/" + _id + "_" + _secret + "_d.jpg";
return url;
}
}
}


2) Alternatively I was thinking that Google and Bing don't have permission/restriction issues(I think) so I was wondering if anyone knew how to set up a Google or Bing image search in Flash using AS3. The farthest I've got on this was finding this link: http://code.google.com/apis/ajaxsearch/documentation/#fonje But I can't seem to get my head around how to actually build the whole search, query and load result.
Anyone?

Thanks!

lordofduct
March 8th, 2010, 06:02 PM
Your link is forbidden (you must have the permissions buggered up or something), so we can't see it.

1) check out the AS3 Flickr api:

http://www.flickr.com/services/api/

docs:

http://www.mamata.com.br/flickrapi/doc/index.html

Note you retrieve XML that describes the list of photos. There is info included in the XML returned that will tell you if it's public, etc etc.

Here's an example of it:

http://www.flickr.com/services/api/flickr.photos.getInfo.html


2) Google and Bing won't have similar issues considering their api because the images aren't associated with any accounts or anything. They instead deal with images on the web. The friendliness of the images should be comparable to any given search that you would do yourself at the respective site.

BUT, this doesn't mean all the images are public. Very often have I done normal google searches and have received image results from sites that have the image in a forbidden section (yet due to some play with their permissions, the google_bot made it in to see it there... maybe it was referenced somewhere on their site, despite the permissions issue). Furthermore some websites have anti-hot linking features set up that won't allow their images to be displayed on sites not on their server.

To check for this is when you take a result you attempt to load it, if when loading it you get an error back (404 not found, 403 forbidden, etc etc), then you know it's not available, and you move on to the next in the cue.

tcabaco
March 8th, 2010, 07:53 PM
Thanks for the reply.

Any ideas on how I should get started with Google API in Flash? Any working example? That's where I need help with.

lordofduct
March 8th, 2010, 10:42 PM
no idea, never did any of this myself before

I just pulled up the flickr api docs for that answer, and I went on my knowledge of google itself for the other.