One of my Christmas gifts to the family this year is to _finally_ go through the drawer full of photos and grandparents’ scratches of relations, and turn it into something more permanent.

There are many applications out there, particularly on Windows, that allow you to do much the same. But I’ve found them to be a creaky lot with roughly the visual appeal of Microsoft Access. And on other operating systems the options are scant. So I took the opportunity to familiarize myself more with Flex and AS3 and build my own parser of GEDCOM (the standard genealogical database format).

The greatest challenge may well have been conceiving of a way to present a family tree on a computer screen in a way that wasn’t a rectangular vastness, the way most family trees appear. With some Scotch tape, lots of paper, and a large enough dining room table, this information design is bearable, but the same cannot be said for fitting the family tree on the screen of a Macbook.

At one point I was playing with the AS3 drawing API when I realized that a circle could be divided into an infinite amount of parts, dividing each arc into two parts (representing father and mother) in the subsequent ring. Ultimately, I realized not only was this space conscious, but also more connected to the mental image of a family “tree”.

Example Screen Shot

I’m sure someone’s thought of this schematic somewhere, but I didn’t see anything resembling this structure until I came up with a name for the application, Family Wheel. When searching around for where this phrase may have been used, I found a fascinating circular hand-drawn chart of descendants, about a century old.

The concept was born, and, as many Flex developers have come to expect, the visual part followed quite easily. I’m amazed at how effectively ActionScript 3.0 averts the roadblocks I would encounter in AS2. If anyone’s counting, here’s another convert to doing any and every ActionScript project in AS3.

And I’ve decided I want to offer this to everyone else too, so Happy Yule to y’all! Just keep in mind this is a work in progress so don’t overwrite your GEDCOM files unless you’re sure the export has functioned correctly.

You can try it out here. If you’d like a sample GEDCOM, or to know more details about integration with Flickr as well as other genealogical apps, read up on it at the project page.

Came across this quite lengthy, but worthy, video yesterday and thought it was worth a share. If you can spare 40 odd minutes, you might enjoy reflecting on how the Internet has and has not met the aspirations of the creator of Hitchhiker’s Guide to the Galaxy:

Link on Google Video (since I can’t get the embed to work at the moment).

Just a full post from a comment to the previous: Player version 9.0.28.0 includes a little known AS3 update: the FileReference class now dispatches an event not only after an upload is complete, but also after fully downloading a server response to an upload.

I’m sure this could be used in several creative ways, but first to mind: a server script’s success/error report can now be handled direclty in ActionScript and communicated to the user.

Or, one step further, you can tie into server scripts written in other languages, i.e. PHP or Ruby, that process asynchronous requests externally and return value(s) that can then be used to add functionality to your ActionScript application.

Formal documentation should arrive with the next authoring release, but to use this functionality for now, add an event listener to “uploadCompleteData”. Your callback function will receive an event with a “data” property that contains the server’s response. For example:

myFileReference.addEventListener("uploadCompleteData",callbackFunction);
myFileReference.upload(new URLRequest(PATH_TO_YOUR_SCRIPT))

function callbackFunction(e:*):void {
trace(e.data);
};

For public applications, be sure to detect the client’s player for the 28 minor release.

Has anyone out there successfully modified Darron Schall’s AS3 Flickr API to upload images to Flickr entirely through ActionScript? Due to a player limitation with FileReference.upload() at the time this API was written, the upload feature was left incomplete. I believe this is no longer an obstacle, since the player includes this parameter as the second parameter of that method:

uploadDataFieldName:String = "Filedata"
Flickr is expecting the binary data to be sent as the value of “photo” rather than “Filedata”. Passing “photo” for this parameter should match what Flickr is expecting, and it would seem that the following code should successfully replace the Upload.upload() method in the API:

public function upload( fileReference:FileReference, title:String = "",
description:String = "", tags:String = "", is_public:Boolean = false,
is_friend:Boolean = false, is_family:Boolean = false):void {
// The upload method requires signing, so go through
// the signature process
var sig:String = _service.secret;
sig += "Filename"+fileReference.name;
sig += "UploadSubmitQuery"
sig += "api_key" + _service.api_key;
sig += "auth_token" + _service.token;
sig += "description" + description;
sig += "is_family" + ( is_family ? 1 : 0 );
sig += "is_friend" + ( is_friend ? 1 : 0 );
sig += "is_public" + ( is_public ? 1 : 0 );
sig += "tags" + tags;
sig += "title" + title; var vars:URLVariables = new URLVariables();
vars.api_key = _service.api_key;
vars.auth_token = _service.token;
vars.description = description;
vars.is_family = ( is_family ? 1 : 0 );
vars.is_friend = ( is_friend ? 1 : 0 );
vars.is_public = ( is_public ? 1 : 0 );
vars.tags = tags;
vars.title = title;
vars.api_sig = MD5.hash( sig );
var request:URLRequest = new URLRequest();
request.data = vars
request.url = UPLOAD_DEST;
request.method = "POST";
trace(vars);
fileReference.upload( request, "photo" );
}

Try as I may, however, I get an invalid signature error from Flickr. There’s a few reasons I could see this being the case:

  1. The FileReference class, in addition to the api_key, auth_token, and api_sig variables that must be manually added to the POST request, also sends two additional name/value pairs: “Filename” with the corresponding name of the file, and “Upload” with the value “Submit Query”. I can confirm this by making a FileReference.upload to a PHP script that traces out all POST variables. These extra variables may not be expected by the Flickr upload server, and may be breaking the request. This would be problematic, since the only solution if this were true would be to find an alternative to FileReference for uploading a file.
  2. Should these two extra variables be a part of the generated signature?
  3. Flickr either expects an MD5 signature with its variables in case-sensitive sequence or case-insensitive sequence. This is important since the “Filename” and “Upload” variables are capitalized. They either are before the other variables or mixed within. There’s nothing in Flickr’s documentation to indicate which one is correct. This shouldn’t be a roadblock, however, since it has to be one or the other.
  4. AS3 FileReference sends the photo data not as “image/jpeg” as Flickr specifies in their example request, but as “application/octet-stream”

ActionScript 3.0 docs list an example upload as:

  POST /handler.cfm HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.example.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Filename"
MyFile.jpg
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="photo"; filename="MyFile.jpg"
Content-Type: application/octet-stream
FileDataHere
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Upload"
Submit Query
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7--

While Flickr lists a request example as:

POST /services/upload/ HTTP/1.1
Content-Type: multipart/form-data; boundary=---------------------------7d44e178b0434
Host: api.flickr.com
Content-Length: 35261
-----------------------------7d44e178b0434
Content-Disposition: form-data; name="api_key"
3632623532453245
-----------------------------7d44e178b0434
Content-Disposition: form-data; name="auth_token"
436436545
-----------------------------7d44e178b0434
Content-Disposition: form-data; name="api_sig"
43732850932746573245
-----------------------------7d44e178b0434
Content-Disposition: form-data; name="photo"; filename="C:test.jpg"
Content-Type: image/jpeg
{RAW JFIF DATA}
-----------------------------7d44e178b0434-- 

If anyone’s resolved this issue, please let me know!