Flex and Flickr - Quick Start
I decided to do something that no one has thought of before - put flickr images into a Flex app. Here’s a very quick getting started guide. Here’s a link to the final app.
Get the following Adobe libraries:
flickr
corelib
Extract both folders and put into your FlexBuilder3 directory in myDocuments. I am using Flex Builder 3 Beta 2.
Change the names of the folders flickr and corelib (remove the version numbers - make sure “src” is a top level directory)
In Flex, right-click to add a new library. Use default path and name the projects flickr and corelib.
Once the projects are created, right-click on the project, choose Properties. Select FlexBuildPath. Set the main source path to “src”. Click on src to add the classes.
For the flickr library - right-click, select PropertiesClick “Flex Build Path”. Choose “Libraries”. Add the corelib library.
Then create a new project that will use the Flickr API. After creation. Right click on the project, select Properties. Click “Flex Build Path”. Choose “Libraries”. Add both flickr and corelib.
Paste this code into your app…
Actually, the formatting of this gets screwed up in the blog. Go to the app and right click to get source.
< ?xml version="1.0" encoding="utf-8"?>
< ![CDATA[
import com.adobe.webapis.flickr.Photo;
import com.adobe.webapis.flickr.PagedPhotoList;
import com.adobe.webapis.flickr.events.FlickrResultEvent;
import com.adobe.webapis.flickr.methodgroups.Photos;
import com.adobe.webapis.flickr.FlickrService;
private var myFlickr:FlickrService;
public function init():void{
myFlickr=new FlickrService("5b7c5a6ff6f1863f261d55f6afc391b6");
myLabel.text='searching for dog pictures';
photos=myFlickr.photos;
photos.search('', 'dog');
myFlickr.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, searchComplete);
}
private var photos:Photos;
public function searchComplete(e:FlickrResultEvent):void{
myLabel.text='search complete';
var ppl:PagedPhotoList=e.data.photos as PagedPhotoList;
var o:Object=e.data;
var photoList:Array=ppl.photos;
var photo:Photo=photoList[0] as Photo;
var imageURL:String = "http://static.flickr.com/"+photo.server+"/"+photo.id+"_"+photo.secret+".jpg";
myImage.source=imageURL;
}
]]>
If you run that, you should get a picture of a dog. I included a flickr api key above. But, you should really get your own. Get it here. It’s immediate.
To do more than display a dog, below is a good example w/ source.
Flickr Flex app.
Wisdom of the Swarms
Ok - I never blog any more, but, occasionally I read. There’s a great article in National Geographic on swarm behavior. Surowiecki’s quoted a few times. And he readily admits that wisdom of the crowds (stock market) is paralleled in the animal kingdom (ant colony). The article even includes a good dose of computer modeling.
Digg Public API Flash Data Viz Contest
Digg has launched a public API - and with it, a contest. Great to see another public API - and I think this is the first public API data visualization Flash contest ever. Cool. API developed by Stamen. Looks like first place gets you all the EA Games out there and the CS3 Master Suite. Other prizes include other Adobe CS3 flavors.
Creating a flickr driven screen saver
This only works for Windows - sorry.
1. Grab the files from my mashup talk here. (Also get a flickr api key if you don’t have one. There is a link on the page.)
2. Open slideShow.fla - enter your flickr api key.
3. OPTIONAL: Change the background color to black - so it matches the screensaver background in Windows.
4. Change the tags to whatever you want. (Comment out //var user=’some user here’ if you want to search all of flickr.
5. OPTIONAL: To remove the slide show controls open “class com.forestandthetrees.slideShow.SlideShowPlayer” and comment out line 74
//h -= addUserNavigation(centerX, h, slideShowDelayVars);
6. Publish and test the swf.
7. Go to flashsaver.org.
8. There are a bunch of options I ignored on the first page. Go to the second page. Name your screen saver upload your swf.
9. Click Next. Download your screensaver.
Too lazy to make your own? Here’s a screensaver that displays photos from flickr tagged with ‘dog’.
Mashup in Flash Talk Files
I posted the files and links from my mashup talk last night. Included - full source for creating a mashup in Flash using flickr photos.
Mashups in Flash Talk
Mashups in Flash
Begins: Tue, 16 Jan 2007 at 6:00 PM
Ends: Tue, 16 Jan 2007 at 8:00 PM
Location:
MIT Stata Building Room 32-144 Cambridge, MA USA
Link: Building 32 on this map
I’ll be speaking about mashups in Flash on Tuesday January 16 for ABUG. I’m going to talk about what mashups are, show a bunch of mashup examples (mostly ones in Flash), and then walk through creating a mashup in Flash - a slide show grabbing pictures from flickr.
The talk is open to the public. It will be fun, you should attend. If you can make it, feel free to bring examples of your favorite mashup. After the talk we’ll check out extra mashup examples.
Tags: flash mashup speaking
Flashr 0.5
Kelvin Luck has just released a new version of Flashr 0.5. Flashr is a great tool for integrating the flickr api into Flash. It is used in findr.
I haven’t upgraded yet - but, I will. And anyone starting a new project should definitely use the latest version - lots of new features - most important queues and caching for requests to flickr.
Grab Flashr here (link above doesn’t work.)
flickr API Change
flickr has changed their public api. Unfortunately, it affects everyone who’s made a Flash/Flickr tool. Mario has good summary here.
So, findr users - uh, it might not work. But, I’ll get to it soon.
Damn public apis.
UPDATE: August 20, 2006
I’ve updated findr to the new api location. If you are using flashr 0.4, you only need to change 2 lines in the flickr.as file
private var _AUTH_ENDPOINT:String = "http://flickr.com/services/auth/";
change to...
private var _AUTH_ENDPOINT:String = "http://api.flickr.com/services/auth/";
...and...
_REST_ENDPOINT = "http://www.flickr.com/services/rest/";
change to...
_REST_ENDPOINT = "http://api.flickr.com/services/rest/";
The updated source for flashr is here.
So, small change - but, pain in the ass because I have multiple versions of findr. I did finally get around to upgrading the detection script to swfObject - so you no longer have to click on findr to activate it in MIE. SwfObject is pretty nice, btw. In addition to handling the MIE problem, it easily allows you to pass variables from url addresses to Flash.
Tiered Internet Service
James Suroweicki (Financial Page writer for the New Yorker) wrote a great piece on the dangers of tiered internet service a couple weeks ago. He’s right on (as always). Tiered internet service is a lousy idea that only benefits the big telecoms (and probably only benefits them in the short run). His piece is worth reading – and is still on-line. Here’s my data-viz-programmer-centric take…
What is tiered internet service? The big telecoms (AT&T, etc.) are lobbying Congress to allow them to sell the equivalent of internet express lanes to certain sites. Right now, internet access to findr is just as fast as access to flickr (and political blog access is equal to Fox News). (This is different from hosting – think pipes not servers – like having two connections: high-speed for some sites, dial-up for others.) If the equal access changes, two trends driving Web 2.0 innovation - individuals being able to compete with bigger companies, and small start-up costs - will be affected.
Equal access to broadband matters because the browser is becoming the new desktop (see writely, etc). And it’s that change that is driving innovation. I can’t get people to download and install a program I write - let alone get them to download my constant updates. That’s what Microsoft can do. But, because people have high-speed access and are getting used to web sites that are more application than information, findr gets used all the time. But, if findr, montager, or retrievr, run significantly slower than flickr, a lot less people will use them. And if less people use these experiments, a couple things happen 1. Less innovation: less time will be spent improving these apps/experiments and developing new ones. 2. Less inspiration: fewer people viewing means fewer people thinking “I can do better.� Now, I would still build experiments if less people used findr. But, there’s nothing like a bunch of people using your app to get you to fix a bug – or to make that UI improvement you keep putting off.
The telcoms are just being shortsighted anyway. Sure, no one is signing up for high speed because they want to use findr (my Mom won’t even do that). But… 1. A lot of the big internet success stories today are started by one or two people (e.g., flickr). (For every gmail, there is a digg.) Keeping equal access encourages people to try new things. And the more good things there are on-line, the more people will want high-speed 2. For many, finding new stuff is why you have high-speed. Viewing Related Tag Browser for the first time was inspiring for me. If I’m paying $/month, I want Related Tag Browser (and the next Related Tag Browser) to come into my house just as fast as Fox News.
flickr Slide Show
hmm.. just noticed that the slide show link doesn’t really work too well in findr. Apparently you can’t use multiple tags and the interesting setting. Findr uses “sort by interesting” to retrieve pics - you do get nice pics that way. The slide show works fine for single tags. And it works in findr personal (where “sort by most recent upload” is used). Looks like I’m going to have to get the slide show working in Flash.
So - two things I’d like changed to flickr - 1. an option to return photos’ tags on photo search - that would make findr personal usable - i.e., get rid of that initial wait. 2. slide show: multiple tags + interesting; photo number to start - e.g., start with the 10th most interesting photo.
Other than those problems, that flickr api’s pretty nice. And I love those easy to understand urls. That’s all that’s going on for the slide show - just calculate the url based on the tags clicked and open a new page. Unfortunately, I should have tested a bit more.