I just ran across datavisualization.ch. Add it to your must reads (along w/ infosthetics and flowing data. And so many more.)

Spent some time going through this flickr set.

And watched this video of Manuel Lima from Visual Complexity.

Also, there’s a Flex Data Visualization contest.

Holy shit. It appears people actually (finally, thank god) care about data visualization. For the first time, I don’t think you can keep track of all the examples (and still have time for work). I remember when Public APIs hit that point maybe 3 or 4 years ago. Exciting.

Info here…

Wednesday, March 25
7:15PM
The New England Institute of Art
Center Campus (Brookline Village) http://www.artinstitutes.edu/boston/AboutUs/MapsDirections.aspx
Room 1001-1002

A special thank you to Oscar Cortes. I shamelessly stole content from the mashup talk he gave to both the Design Patterns group and the excellent Flex Camp Boston.

]]> http://www.forestandthetrees.com/2009/03/14/speaking-at-harvard-flash-group-thursday/feed/ 0 http://www.forestandthetrees.com/2007/11/09/flex-and-flickr/ http://www.forestandthetrees.com/2007/11/09/flex-and-flickr/#comments Fri, 09 Nov 2007 16:59:07 +0000 Doug http://www.forestandthetrees.com/?p=132 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"?>
creationComplete="init();">

< ![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.

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’.

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

Tags: flash mashup speaking