A feast for the eyes…

It seemed a good idea to liken the releases to various animals/creatures. No one found this particularly funny or amusing and I died a bit of a death in front of the group.

It beat bullet points though.

The project was pretty complex but even more excellent when paired up with the Drummer who went as Berk. Here is a picture of both of us…

The construction process was, as usual, cardboard-based and I captured the whole construction process using a mixture of time-lapse and regular photography. See here…

I used some special glow in the dark paint for the purposes of making the whole thing glow. The stuff was pretty good, but it has to be really dark to get any effect. I think I just didn’t use anywhere near enough. One can apparently only covers a metre square and there was a lot more than this on the costume.

Boni Glows!

On the whole the party itself went pretty well, although getting through doors was much more challenging than I had thought. Plus the lighting at the venue meant there was not quite enough light to charge up the glow-in-the-dark paint, and not quite enough darkness to see any glowing. Rubbish…

Given the theme of the party was cartoons, there were a bunch of really good costumes – the best being a pair of milk cartons from the Blur Coffee & TV music video. Very nicely done.

There is also a little upside me in the corner to avoid spoiling the monster with candles.

Instead I thought it might be interesting to do something based on something I was almost completely attached to when growing up. This was of course my very first computer, the Sinclair ZX Spectrum +2.

Mostly you only hear about its predecessor the 48K spectrum, with the rubber keys. Fortunately I didn’t have that. Instead I had to post-Sinclair and Amstrad-built model, with integrated cassette recorder and plastic keys. A truly fantastic machine. Here is the real thing…

To get a realistic look and feel I needed to think of some gimmicks that would lift the outfit from merely a grey box with some decoration (which it actually turned out pretty close to) The key gimmick would be fully sprung keys. I proceeded to create over 70 springs from garden wire. This took bloody ages and was not only boring, but took quite a toll on my fingers, while winding wire round a biro again and again and again. I then had to create over 70 little boxes that I would then need to attach the spring too. I then had to attach the sprung keys and make sure they all fitted. This was the most stressful bit of the whole project – since this was the bit where the idea turned into a reality and would be the difference between an ok costume and a really great one.

The next gimmick was the super-size plugs and sockets on the size. I had some really big plans for these…but I kind of lost inspiration after the mental turmoil of springing the keys.

Hannah kindly made me some perspex for the tape recorder opening – that had obvious fogging up implications. And that was that…a few other pictures below, including Clarkson’s elephant costume – a much better effort than mine. The key question is…why would anyone ask if we made these costumes??? and when I answered that we got them from John Lewis, why would anyone believe us???

Last but not least, the whole exercise would not be complete without a trip to PC World….

It was a much more complex project to produce than I first thought. Despite having some grand plans, I had no idea what would actually be possible in the time available and more importantly, what would be appropriate to a wedding audience of all ages and tastes. Gathering the content together was a mammoth task, since I had various snippets of video kicking around on a variety of ageing and mostly rusty old PCs – all in a variety of formats. For some reason all the MPG clips from old cameras would not import so I had to use MPEG StreamClip that did a really good job of re-encoding some pretty dreadful little clips without reducing the quality still further. I also had a photo library of 8000+ photos, where Rimmer appeared regularly, that I wanted to trawl for suitable images to include. This was before I had even worked out what animation elements to include and how to hang the whole thing together so it didn’t just look like I had discovered the zoom function on a video camera.

I started thinking the whole thing could be jumbled together using iMovie. This was a pretty ridiculous assumption. Helpful as iMovie is, it has relatively poor compositing support and doesn’t really give you the control over the video that you get with things like Final Cut Express and Final Cut Pro. I settled for FCE in the end, mainly because I managed to quite quickly work out how to do green screen stuff reliably and quickly.

The first piece to complete was actually the ending. I had thought a while ago that the ending of Fight Club would make a good mash-up and seemed like a good way to set a high bar to live up to for the rest of the video. I also didn’t want to rely too heavily on the video content I already had – since most of it was pretty low quality and really not good enough to make anything worth watching. To start with I had to download a Blu-ray rip of the film, which at over 8GB, took a very long time. The animated heads were created on Flash and Photoshop using the standard jaw-cut-out technique that is tried and tested and is funny without having to put any specific effort in. I made the background a very bright green so that FCE would have no problem chroma-keying it out when I started laying things together. At first I hadn’t quite worked out how to keyframe layered videos together so I end result looked a bit wrong. I later moved the heads and changed their scale, but left the one of clare, because for some reason the expression suits that kind of static image. Not sure why. For the vocal bit I ended up balancing my phone on a window sill and videoed myself saying the line “You met me at a very strange time in my life”, but with a green piece of paper over my face with a mouth sized hole cut out. I am sure there are better ways of doing this, but this worked ok.

Having spent some time on a few animation bits I set to work trying to piece everything together. The plan was to set it all to music, but I wasn’t sure whether to have a single track or to mix a load of relevant stuff together. Having experimented with a few things it was easier to stick with a single song…I chose the track “My Girls” by Animal Collective, because it has a kind of mellow start, with few vocals that gave plenty of opportunity to stick in plenty of clips that had existing sound and then build up to some kind of climax by throwing together some of the shorter more visual clips.

Clarkson gave me the idea to use the clips I had of Rimmer jumping into the Norfolk Broads to form a kind of narrative throughout. This worked pretty well since there is a kind of build of expectation of him jumping in. But then when he does it is a bit of an anti-climax – which was much better than just showing all the clips together. The other thing that really helped tie everything together is the clip I start with. (after the initial Flash animation) Not only is the clapping scene fairly ridiculous, but it really comes into its own when sped up and synced with the music in the last third. In fact the best bits of the video are the ones that seem to directly go with the music… Notably the muppet drumming, Gorniki drumming and the dance machine stuff.

The video showing went down really well in the end. Much better than I had expected. After spending so long on things, it became ever more difficult to critique the whole thing. The main goal was of course to try and do something that no-one else could ever do and that was definitely achieved.

Today I went round every shop in Westfield, Shepherds Bush trying to find out what each operator is doing, not to mention various calls to customer services. No information other than a slightly dubious chap at O2 who promised phones and SIMs on launch day.

Luckily when I arrived home I had received a micro-SIM from Vodafone (destined for an iPad given the associated documentation) but confirmed to work in the new iPhone 4 according to customer services. Apparently I just need to call 03333040044 to activate it on the 24th.

The key seems to be that although you can’t use an iPad activated SIM in an iPhone 4, you can use an unactivated micro-SIM in an iPhone 4.

All very confusing…

Modifying the iTunes library XML file could potentially be done, but this has risks. Firstly, the XML file can get prohibitively big, and given AIR can only use the DOM method for parsing XML, it could crash the application and do untold damage to the XML library itself, which brings up the issue to backing up the library first. Also unknown is the behavior if iTunes tries to modify the library at the same time as the AIR application, not to mention the requirement to restart iTunes after the change to reflect the changes. All in all this was not a good option, with lengthy development, risky outcome and poor user experience.

Option 2…

iTunes has a COM api library accessible from a native java or .Net application, which in turn could be initiated by AIR. This is far from ideal due to having a second application running on the user’s computer, the volume of development effort to create the application and the complexity.

Option 3…

Users can commonly add songs to iTunes by dragging files into it. This is accompanied by the fact that iTunes launches when double-clicking on any file associated with it such as .mp4 or .mp3 and of course .m3u playlist files. By launching an m3u file with a collection of track paths contained within it, iTunes will launch, songs will be added to the library and user experience is not compromised and development is simple. Although AIR cannot natively launch iTunes, it can launch files, via the browser, thus launching any application that is associated with the file-type. m3u files are commonly associated with iTunes, but also windows media player and any other media player worthy of use.

The key area of development is to dynamically create m3u playlists before calling them with a URLRequest. This function uses Fzip to unzip any zip files that may have been downloaded and creates a collection of paths to write to the playlist file. The playlist data is stored in memory with each download item until the user decides to add the item.

private function generatePlaylist():void {
var playlistName:String = (tmpFile.name.split(‘.’))[0]
var os:String = Capabilities.os.substr(0, 3).toLowerCase();

var playlistpath:String
if (os == “mac”) {
if (productType == “album”) {
playlistpath = unzip(File.desktopDirectory.resolvePath(tmpDownloadURL + artistPath + tmpFile.name.replace(“.tmp”,”")).url,File.desktopDirectory.resolvePath(tmpDownloadURL + artistPath).url);
} else {
playlistpath = viewableDownloadURL + artistPath + tmpFile.name.replace(“.tmp”,”");
}
} else {
if (productType == “album”) {
playlistpath = unzip(File.desktopDirectory.resolvePath(tmpDownloadURL + artistPath + tmpFile.name.replace(“.tmp”,”")).url,File.desktopDirectory.resolvePath(tmpDownloadURL + artistPath).url);
} else {
playlistpath = viewableDownloadURL + artistPath.replace(/\//g, “\\”) + tmpFile.name.replace(“.tmp”,”");
}
}
this.Playlist = playlistpath;
}

I kind of got into a mini pickle over forward slashes and back slashes that causes this function to be a little more complicated than is probably necessary, but you get the idea. Next it is necessary to create the playlist file and do the URLRequest after a button-click…

public function addToItunes(e:MouseEvent):void {
var playlistfile:File = File.applicationStorageDirectory.resolvePath(“playListCache/” + e.currentTarget.data[6] + “.m3u”);
var playliststream:FileStream = new FileStream();
var dlManager:DownloadManager;

for (var i:uint = 0; i < downloadManagerObjects.length; i++) {
dlManager = DownloadManager(downloadManagerObjects[i]);

if (e.currentTarget.data[2] == dlManager.FileID) {
playliststream.open(playlistfile, FileMode.WRITE);
playliststream.writeUTFBytes(dlManager.Playlist);
playliststream.close();
}
}
navigateToURL(new URLRequest(playlistfile.url), 'quote');
stage.nativeWindow.alwaysInFront = true;
stage.nativeWindow.alwaysInFront = false;
}

Notably I do a bit of mucking about with the stage to make sure the application stays in front when launching the URL through the browser.

The flex version of Imbimp just went live and it tries to improve on the standard Imbimp cardboard interface by keeping everything on one page, where arrows allow the user to browse new content. The widget sidebar is also combined with the navigation. There are no huge benefits to either party (ie me or random imbimp reader) but it’s a good proof of concept of what can be rustled together using Flex in about a day.

Fetching the RSS feed is as easy as calling an httpService…

result=”loadWordpressXML(event)” />

and…

private function loadWordpressXML(evtObj:ResultEvent):void {
var myURLPattern1:RegExp = /content:encoded/g;
var myXMLString:String = evtObj.result.toString().replace(myURLPattern1, “content”);
wordpressXML = XML(myXMLString);
}

From here you can then use the XML in whichever way suits your design… For example, here I am creating the navigation dynamically…

private function generateNavigation():void {
for each (var itemXML:XML in wordpressXML.channel.item) {
var navigationItemHBox:VBox = new VBox;
navigationItemHBox.styleName = “navigationBackground”;
navigationItemHBox.width = 280;
navigationItemHBox.height = 37;
var navigationLabel:Label = new Label;
navigationLabel.text = itemXML.title;
navigationLabel.width = 240;
navigationLabel.styleName = “navigationText”;
navigationLabel.truncateToFit = true;
navigationLabel.buttonMode = true;
navigationLabel.useHandCursor = true;
navigationLabel.mouseChildren = false;
navigationLabel.data = itemXML.guid;
navigationLabel.addEventListener(MouseEvent.CLICK,selectPost);
navigationItemHBox.addChild(navigationLabel);
navigation.addChild(navigationItemHBox);
}
}

The most difficult part was to position the main post elements in the right place before whizzing them into view. There is a little bit of dubious logic required to do that. Look at the attached source for that.

Also given the increased size of the feed – ie it loads 100 post in one go (not including images) it’s important to have some kind of preloader in place while things load up.

Download an earlyish version of the source here to see how I did…

…and see the finished version here