Here’s a recent project I was involved in at Soap:

We created the worldsbiggestpacman.com for Microsoft to promote the new features of IE9, but it will work in any HTML5 capable browser.

You can create your own PacMan maze and add it to the ever growing map:

It’s a completely non-flash solution using JavaScript / HTML5.

I worked on the maze editor and the home page map. It was pretty fun, dusting off the old javascript knowledge after spending so much time in Flash land.

JS Frameworks used: MooTools, JQuery, Modernizr, YepNope, KeyLib.

Since registration is required to take a look at it, I have instead some screen capture. This is not quite the final version but enough to show how it works. The soundtrack is by my good friend Jay White.

MCFC Seat Selector from Derek McKenna on Vimeo.

Because we wanted the stadium to look like the actual real world layout, the first challenge was to obtain the seating layout information. Then we had to get it into a format that flash could use, i.e. xml and also ensure that it matched the ticketing data as provided by the 3rd-party ticket-vendor. It was an involved process, some of which I captured along the way:

1. Here is a Omnigraffle representation of the existing xml feed from the online ticket vendor. The seat locations are conformed to a left aligned grid which bears little resemblance to the real world layout.

2. After pestering the architects, we managed to get our hands on Autocad files of the stadium, which included fairly accurate seating layouts. We were lucky that the stadium was not very old, and such files actually existed. We didn’t have Autocad software, but were able to open the files with Illustrator. Plenty of time to make a cup of tea while these suckers were opening.

3. It was fairly easy to get rid of much of the unwanted information, by deleting unwanted layers. We still had no idea how we were going to make xml from this. We found out that the individual seats were not stored as individual objects with position & rotation, but as broken-apart line information. There was also a lot of junk information overlaid on the seats themselves. Although this could be removed manually for each seat, I wasn’t very excited by the prospect of cleaning more than 45 thousand seats.

4. To clean up the seats, I wrote some routines in ExtendScript. ExtendScript is what Adobe call their scripting language for their CS suite. It’s essentially JavaScript which in this case I used on Illustrator. For the most part, learning it just involves finding out how objects are represented in the Illustrator DOM. After some trial and error I was able to drill down to the seat objects themselves, where simple tests on the length of the lines could identified outlines from the other unwanted data. I added a loop to iterate over all objects in the selection and hey presto, could delete the unwanted data for thousands of seats in one hit. Here is the same layout as above seats after running the script:

5. The next step I can’t speak much about, as it was done by a colleague Martin. I saved the cleaned seats as svg files, which he then analyzed with some Perl scripts. He determined the position and orientation of the seats is determined with fairly straightforward trigonometry and saved out each block as an xml file, which was loaded into Flash and the basis for positioning seat objects. Big thanks to Michael Baczynski for an article on object pooling which significantly improved the performance of adding and removing large numbers of seats. The last shot is of the entire stadium with all seats cleaned. The designers that worked on this project (Will Cookson, Vasco Alves) have added the pitch and surrounds to the finished piece.

Finally a big thanks to the developers of the Lowra IOC framework which I used on this project.

Sound of Orange Rockcorps is collaborative audio toy that allows people to record audio samples using their PC microphone or mobile phone. All notes recorded by a person and their friends can be assigned to the available notes in the track. The remixed track can then be posted as a self contained widget to facebook, blogs etc.

People can allow the site to connect to Facebook, or go it alone:

Any friends who have taken part will be loaded in

Then you can choose a track:

Sounds from you and your friends can be assigned to the available notes, or you can record a new one:

People can record with either their PC microphone or phone:

The sound is listened to and then recorded:

The entire track can be played back at any time:

Users can share their track on Facebook, MySpace, blogs, and other networking sites:

Posting to Facebook:

A self-contained playback widget then appears on the users wall:

Creators can submit their tracks to be featured on the site:

A news feed from the rockcorps blog is displayed on the site:

Sound of ( rockcorps projects ) volunteers landing page:

Each of the volunteers recorded a sound which can be listened to on their relevant project page:

Noticed anything different lately? We’ve been beavering away behind the scenes to make some last minute improvements for racers. You should now be able to see up and coming prize tokens and rainbows on the thumbnails for the next sites.

If you need some tips, Mattias wrote some good pointers on his blog, they are right on the money. The worst thing that can happen is that you get stranded without boost, so I recommend that you only put your foot down when you see some more coming up.

Happy boosting!

Update: We’ve fixed that annoying “your balloon has left…” screen appearing twice if you had left the computer for a while. Now when you follow your balloon you should go straight to it

This is the first phase of the latest project I’ve been working on at Poke, a flash site for Orange www.playballoonacy.com. Finally the big clients are letting us use AS3 (Flash9). This project is massive. Thankfully, I’m getting some help from Gabes aka Pixelbreaker. Get a balloon or submit your site to be part of the race.

I finally made the switch to FDT. My munificent employers stumped up the 599£‚ for the enterprise version which is a fairly substantial outgoing. Up till recently I have been doing all my AS editing in TextMate, which at $50 is considerably cheaper and in many ways rocks. I love it’s straight forward interface and customisable features.

TextMate is flexible. With a bit of help from some eager contributors from the TextMate community I had some really great additions to my workflow. You can publish swfs directly from the TextMate interface using the open source AS2 compiler MTASC (see this post) or Adobe’s free MXMLC compiler ( I haven’t managed to get it to work with the faster FCSH yet) along with integration with ANT build scripts for fast and easy multi-swf builds (see Simon Gregory’s blog for the AS3 bundle and the ANT bundle).

So what does FDT offer? Well as-you-type code checking, and cross referencing of your custom classes for one. Automatic organisation of imports is a massive time saver. Refactoring of classes, methods and properties is also something that is trivially easy in FDT. I seem to be spending a lot less time maintaining the boring stuff and more time concentrated on the ‘real’ bits of code.

I still miss a few things about textmate, being able to drag any project on to textmate and have it opened in a few seconds. Vertical text selection and editing. In the end the features of FDT are just too powerful to resist. For an Actionscript project, especially if you are working with frameworks or AS3 where there are many packages to remember it saves a lot of time.

The Unlimited website mentioned in this post is up for FWA Site of the Year. If you’ve got a sec please throw a vote it’s way.

Just finished work on the Jenny Packham site, lots of Flash wizziness which once again benefited from the Pixlib framework. I sort of inherited this project after the original build went a bit haywire. I’m starting to see how a project’s complexity increases exponentially when many interactions are possible from anywhere in the application.

Credits:

Project Management: Simon R | Art Direction / Site Design: Buzz, Al | Flash Programming/Build: Dezza, Russ| Back End: Nilesh, Igor

This is a project that we just finished at Poke for Orange’s ‘Good things should never end campaign’. It’s an unlimited web page! That’s as in unlimited not *unlimited. I’m pretty happy with how it turned out in the end, as the concept of unlimited made me pretty nervous to begin with. This is the second project I’ve completed using Francis Bourre’s open source Pixlib framework for Flash and I must admit, I am loving it. Thanks Francis!

Credits:

Project Management: Alex, Karen | Art Direction / Site Design: Julie, Nik, Nicky | Illustration/Animation: Rex | Flash Programming/Build: Dezza, Dee, Stinky, Matt, Marius | Back End: Knotty, Marc | Sound: Nick