kelvinluck.com

a stroke of luck

Wellcome Trust competition


A few months back I heard about a competition being organised by Ico Design, BD4D and the Wellcome Trust. The idea behind this competition was to “produce an interactive Flash piece that is playful and engaging using at least 2 words from the Word Soup”. The “Word Soup” is a collection of words that form part of the branding for the Wellcome Collection.

I managed to scrape together a little bit of time so I put together an entry. It was a mashup between the provided words and Flickr. I built it using Flashr and skinned it with a nice clean design knocked up by my good friend Leigh Kayley (based on the look and feel of the scramble game we found on the Wellcome collection’s site).

The entry is described quite succinctly in an article in Design Week so I’ll borrow their words:

Kelvin Luck asks us to look at images plucked from Flickr and choose from the wordsoup which one was used to tag the picture. It is harder than you think: what word could describe a masked woman in a spangly bikini who is wielding a chainsaw? Clue: it is not what you might think.

If that doesn’t explain it then you can play it yourself and see if you can get on the high scores. It can be frustrating at times because some people tag their photos a bit randomly but that adds to the adictiveness :)

Last night I was invited to the launch event for the new online exhibits site (where all of the competition entries are showcased) and the announcement of the competition’s winners. I was very surprised and pleased to find out that my entry got the second prize! Yay :)

I’d recommend checking out the site to see the many cool entries and the very nice innovative interface for finding them (also courtesy of Ico Design)



Automatically generating exclude.xml files


I’ve recently been working on a project where a number of swf’s use common classes. The initial swf loaded contains most of these classes but so do the child swfs it loads into itself. This is because they need to be able to call methods in and dispatch events to classes in the main swf. Importing the classes gives me compile time type checking and auto complete (in FDT – my editor of choice).

So I discovered excude.xml files. These allow you to specify classes which you don’t want to be compiled into a given swf. Since all AS2 classes live in the _global scope you can share them between different swf’s. So if your initial swf includes a class that you use in a child swf you load into it then compiling that class into the child swf is redundant.

exclude.xml files are easy enough to understand – simply create a file with the same name as your fla but with _exclude.xml added on (e.g. nav.fla would have an exclude file called nav_exclude.xml) and in it list all the classes you want to exclude from compilation into that swf.

The problem with exclude.xml files is when a class you are excluding has a dependency on other classes the dependant classes aren’t automatically excluded. And manually figuring out the dependency tree in any non-trivial application is tricky to say the least. So what we need is a way to find all of the classes which are included in a given swf. You can then use this to generate an exclude list for any other swfs that will be loaded after it.

I found a program which sounded like they might do just that: sexieR on OSFlash. Unfortunately I got put off by it’s requirements and and didn’t get around to finding out if it could do what I wanted.

Then I realised I could generate the exclude list very easily myself from Actionscript! Since all classes are instantiated as Objects in the _global namespace we can simply recursively loop over this namespace and note all the classes we come across. So I wrote my “IncludedClasses” class, which does the above and outputs a string for you to copy and paste into an exclude.xml file. You simply have to temporarily include this line in your “master” fla (the one which contains the classes you want to access from other flas):

trace(com.kelvinluck.util.IncludedClasses.getInstance().getExcludeXml());

Then in the output window you will find a string which you can copy and paste into an XML file with the correct name and then – bobs your uncle – you’re sorted :)

The IncludedClasses class is shown below or you can download it here.

/**
* Class: IncludedClasses
*
* @author KLuck
*/

class com.kelvinluck.util.IncludedClasses
{
   
   private static var instance:IncludedClasses;
   
   /**
   * Private constructor - Singleton
   **/

   private function IncludedClasses()
   {
     
   }
   
   function getExcludeXml():String
   {
      var classes:Array = _arrayUnique(_getClasses(_global, '', []));
      var r:String = '<excludeassets>' + newline;
      for (var i:Number=0; i<classes .length; i++) {
         r += '<asset name="' + classes[i] + '">' + newline;
      }
      r += '</classes></excludeassets>';
      return r;
   }
   
   function getArrayString():String
   {
      var r:String = '["' + newline;
      r += _arrayUnique(_getClasses(_global, '', [])).join('", "');
      r += '"]';
      return r;
   }
   
   private function _getClasses(obj:Object, path:String, classes:Array):Array
   {
      var ret:Array = [];
      for (var name:String in obj) {

         if (typeof(obj[name]) == 'function') {
            var firstLetter:String = name.substr(0, 1);
            if (firstLetter.toUpperCase() == firstLetter) {
               classes.push(path + '.' + name);
            }
         } else {
            var passPath = path == '' ? name : path + '.' + name;
            classes = classes.concat(_getClasses(obj[name], passPath, classes));
         }
      }
      return classes.concat(ret);
   }
   private function _arrayUnique(a:Array):Array
   {
      var o:Object = {};
      for (var i:Number=0; i<a .length; i++) {
         o[a[i]] = true;
      }
      var r:Array = [];
      for (var i:String in o) {
         r.unshift(i);
      }
      return r;
   }
   
   
   /**
   * @return singleton instance of IncludedClasses
   */

   public static function getInstance():IncludedClasses
   {
      if (instance == null)
         instance = new IncludedClasses();
      return instance;
   }
   function toString():String
   {
      return '[com.kelvinluck.util.IncludedClasses]';
   }
   
}

So simply run this script in your “master” fla (or library fla) and then create exlude files for all your “slave” fla’s. In the project I’m working on this knocked 30-40KB of each of the included swf’s which makes it definitely worthwhile.



Selfportraitr: An Interactive Exhibition Curating the Flickr Community


A while back I was approached by Stephen Jablonsky from the School of Visual Arts in New York. He was looking for someone to help with a project him and and his colleague Jeremy Chien were doing for the Pace/MacGill Gallery. He had come across Flashr and some of my experiments with it and thought that I may be able to help with the project.

It turned out I could! The project became “Selfportraitr”. The idea is that through ten computers in the gallery itself and through the Pace/MacGill website people can search through the thousands of photographs on flickr tagged with “selfportrait” and can choose the ones they like best to add to the gallery’s favourites. This enables members of the public to act as curators for an exhibition in a major New York gallery. More information on the app and the background to it is available in the official press release.

You can view the exhibition online using one of two applications:
  • Viewr – this application shows a slideshow of self portrait pictures. The interactivity of this application is limited to adding passing images to the gallery favourites.
  • Selfportraitr – this is the full on application as it appears in the gallery. It was designed for display on the Apple 23″ cinema displays in the gallery at a resolution of 1920×1200 so unless you have a massive screen it may appear a bit cramped and some text may be tricky to read. But you will get to play with the full functionality of the app and hopefully find some nice photos :)

This project was featured on the flickr blog, the New York Times (registration required) and even on ABC news which is pretty cool. It also sparked some controversy on the Flickr Central discussion board although in general people seem to appreciate what it is doing.

I built the app in Flash 8 using the bleeding edge version of Flashr. As you will have seen, some of the functionality of the app is pretty advanced and creating this app led to a number of bug fixes and enhancements to the Flashr code. A good by-product of this is that now the long awaited 0.5 release is within sight. It was also interesting to collaborate internationally across time zones on a project as complex as this and all things considered it went remarkably smoothly.



FlashrSimpleSearch


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.

Somebody on the Flashr mailing list was having difficulties getting to grips with Flashr. Since a picture is worth a thousand words and I needed to do some examples of using Flashr 0.5 anyway, I put this very simple example together…

Basically all it does is connects to the Flickr API and does a search for a tag using flickr.photos.search. It then calls flickr.photos.getInfo on each of the returned photos to get more detailed information (like authors name, description and tags used). Once it has got all this information it simply traces it to the output window in Flash.

All of this is made much easier by a feature in the as yet not officially released Flashr 0.5. Now when you make multiple requests to the Flickr API the requests are added to a queue and each one executes in turn. This makes writing applications that rely on multiple API requests (such as this one) much simpler.

DOWNLOAD
You can download all the files for this example from here. This includes the latest version of Flashr 0.5 (see the trac timeline for recent changes). The specific file you are interested in is com.kelvinluck.flashr.example.FlashrSimpleSearch.as.

THE CODE
Here is the entire class which powers this little “application”.

import com.kelvinluck.util.LogWrapper;
import com.kelvinluck.flashr.core.FlashrResponse;
import com.dynamicflash.utils.Delegate;
import com.kelvinluck.flashr.core.ResultsSet;
import com.kelvinluck.flashr.core.Photo;
import com.kelvinluck.flashr.core.Flashr;
/**
* Class: FlashrSimpleSearch
*
* Very simple example showing how to search for a tag using Flashr 0.5 and then
* get more detailed information about each matching photo.
*
* Currently just traces the relvant information out.
*
* Author:
* Kelvin Luck
*/

class com.kelvinluck.flashr.example.FlashrSimpleSearch extends MovieClip
{
   
   public static var SEARCH_TAG:String = "snow";
   public static var NUM_RESULTS:Number = 10;
   
   private var _flashr:Flashr;
   private var _flashrResponse:FlashrResponse;
   
   private var _numResults:Number;
   private var _photos:Array;
   
   /**
   * Function: FlashrSimpleSearch
   * Constructor
   **/

   function FlashrSimpleSearch()
   {
      // uncomment the following lines if you want to see the internals of what is happening with Flashr.
      //LogWrapper.getInstance().init();
      //LogWrapper.getInstance().addTracePublisher();
     
      _photos = [];
     
      _flashr = Flashr.getFlashr();
      _flashr.apiKey = "b40e05adf210ad4c4cc4da00f99f4184";
      _flashr.cacheQueries = true;
     
     
      _flashrResponse = new FlashrResponse();
      _flashrResponse.onPhotosSearch = Delegate.create(this, onPhotosSearch);
      _flashrResponse.onPhotosGetInfo = Delegate.create(this, onPhotosGetInfo);
     
      trace("Searching for " + NUM_RESULTS + " photos matching tag '" + SEARCH_TAG + "'");
      _flashr.photosSearch({tags:SEARCH_TAG, per_page:NUM_RESULTS});
   }
   
   function onPhotosSearch(rs:ResultsSet)
   {
      _numResults = rs.photos.length;
      trace("Loaded data for " + _numResults + " photos out of " + rs.total + " matching tag, requesting more details about each photo");
      for (var i:Number=0; i<_numresults ; i++) {
         var thisPhoto:Photo = rs.photos[i];
         _flashr.photosGetInfo(thisPhoto.id, thisPhoto.secret);
      }
   }
   function onPhotosGetInfo(photo:Photo)
   {
      trace("Loaded detailed data for photo '" + photo.id + "'");
      _photos.push(photo);
      if (_photos.length == _numResults) {
         onAllPhotosLoaded();
      }
   }
   function onAllPhotosLoaded()
   {
      trace("*************ALL PHOTO INFO LOADED*************");
      trace(" ");
      for (var i:Number=0; i<_photos.length; i++) {
         var thisPhoto:Photo = _photos[i];
         trace("Photo " + thisPhoto.id + " :");
         trace("  Title: " + thisPhoto.title);
         trace("  Description: " + thisPhoto.description);
         trace("  Taken: " + thisPhoto.dateTaken);
         trace("  Author: " + thisPhoto.owner.username);
         trace("  Author ID: " + thisPhoto.owner.nsid);
         trace("  Thumbnail: " + thisPhoto.thumbnailUrl);
         trace("  Photo page URL: " + thisPhoto.photoPageUrl);
         trace("  Tags: " + thisPhoto.getTagsAsStrings());
         trace("------------------");
         trace(" ");
      }
   }
   
   /**
   * Function: toString
   **/

   public function toString():String
   {
      return "[com.kelvinluck.flashr.example.FlashrSimpleSearch]";
   }
}

I hope this is useful to someone, please leave any feedback as a comment below or on the Flashr mailing list;



Flashr 0.5 under construction


Update 2:

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:

For the latest up to date information about Flashr please check out the new Flashr microsite

After a lot of discussion on the Flashr mailing list I have decided to make some pretty extensive changes to Flashr for the 0.5 release.

This will involve breaking backward compatibility in some cases but the rewards will be a cleaner API and the addition of a bunch of cool new features like a priority ordered request queue, request caching, and request timeouts…

It also means that until 0.5 is released the trunk of the Flashr repository will contain unstable code. If you want the latest and greatest copy of 0.4 (with a few improvements from the zipped 0.4) then please grab it via subversion from the 0.4 branch. I think I changed all the relevant links on the site but thought I’d give this headsup just in case…

In the meantime you might want to check my latest experiment which is something that will benefit greatly from queueing system in the upcoming version of Flashr and so which can act as a kind of benchmark for it :)



2005 – an interesting year on flickr


Update 2:

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:

For the latest up to date information about Flashr please check out the new Flashr microsite

With the release of a new method on the Flickr API it is now possible for us to find the most interesting photos on a given day. I’ve combined this with the excuse that it’s a new year and put together a little toy which lets you look back over the most interesting photos of 2005…

The toy shows you the 15 most interesting photos from this date a year ago… You can click on a photo to find out more about it or you can drag the little slider at the bottom to choose a different day… Quite a cool way to discover some of the amazing photos on flickr!

Update

I carried on playing around with the idea and made a new version. In this version you can see the top 3 most interesting photos for five consecutive days. I thought that you would end up with the same photo staying at the top for a few days but I guess flickr’s interestingness algorithm stops that happening… Interesting, ey?



Flashr gets more interesting


Update 2:

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:

For the latest up to date information about Flashr please check out the new Flashr microsite

As just announced on the flickr mailing list, the guys at flickr have just released a new API method – flickr.interestingness.getList.

This cool new method lets you get a list of the most interesting photos for any given date… So I went straight ahead and added the method into the subversion repo for Flashr. You can see the exact changes here.

I’m not going to package up another release so soon after 0.4 but if you are interested in using this new method then grab the source from subversion and enjoy :) I certainly like the new method – I just stuck together a little example using it :)



Flashr 0.4 released


Update 2:

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:

For the latest up to date information about Flashr please check out the new Flashr microsite

I have just released version 0.4 of Flashr. This is just a bunch of changes which have been sitting in the subversion repositry for a while along with newly generated docs.

The changes since the last release can be seen in detail on the trac site or you can look at the changelog.txt for a more concise rundown.

Any comments on the changes or on Flashr in general please direct to the mailing list.



Made with Flashr


Update 2:

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:

For the latest up to date information about Flashr please check out the new Flashr microsite

Over the last few weeks lots of people have suddenly released cool new experiments using Flashr to connect to flickr.com. It’s great to see people making cool stuff and finding a use for Flashr – now I need to get round to finishing and releasing some of my own experiments with it! Anyway – here’s some little descriptions of the new stuff…

Flickeur by Mario Klingemann.
Really cool program which “retrieves random images from Flickr.com and creates a stream-of-consciousness type of video clip”. Mario has created incredible transitions between different images using Flash 8′s BitmapData Object and (I imagine) lots of really clever maths and who knows what else! The end result is a film which looks professionally put together even though it is in fact randomly generated by your computer!

Flappr by Buck DeFore
In the words of it’s maker, “Flapper is a Flash 8 interface for Flickr. Its goal is to provide a more explorative way of browsing the best repository of publicly shared photographs on the Internet”.
Basically it lets you search for photos, browse and view them. It builds a history of user’s whose photos you have looked at and you can easily navigate to any of their tags or groups. You can also see and link straight through to related tags for any tag you are looking at.
Another feature which I have just discovered is that it keeps a history of the photos you have looked at (try rolling off the right hand side of a photo when looking at it – it should shrink down and show you all the previous photos and let you click through to them) – cool :) Buck is still developing it so stand by for more cool features!

Findr by Doug Marttila
Findr again allows you to browse through photos on flickr.com by typing in a start tag. The clever twist here is that you can then “drill down” in your search by choosing another tag from the current tag’s related tags. And you see photos which match all the tags you have selected so far. Try it – it makes a lot more sense when you do it than my explanation does!

Flickr Wing by Iiley Chen
A demo of the ASWing open source component framework for Flash and an interface to Flickr. Allows you to search for photos on Flickr and browse through the search results.

So – some really cool stuff as you can see! Great work everyone :) If you have made anything with Flashr then please let me know – either through the mailing list or by leaving a comment below…



Flashr Auth demo


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:

This example will no longer work as-is – you will need to update your Flashr files as described here.

Update:

For the latest up to date information about Flashr please check out the new Flashr microsite

I’ve just stuck together a simple demo which shows how to authenticate against flickr.com using Flashr and the new authentication API.

This seems to be one of the more confusing aspects of the Flickr API (it definitely was to me until I implemented it the first time). This demo basically shows the process of authenticating and also shows how you can store the authentication token in a SharedObject so that a returning user doesn’t need to log in again.

Note: you don’t need to authenticate against flickr.com to use most methods of the API. You only need to do it if you want to access a user’s private photos or to add / update information. The api docs tell you when authenication is necessary (I didn’t necessarily port all this information across into the flashr docs).

Right, here is the demo in action:

And here is the source code. To use the source code just download it and unzip it. Edit the file to put your API Key and secret in. Make sure you have the core of Flashr in your class path and compile the class with these MTASC flags (on top of your normal ones for -cp and -swf):


-header 400:250:25 -main com/kelvinluck/flickr/example/FlashrAuthDemo.as

If you have any problems with the demo then please ask questions on the Flashr mailing list.