Well dezza is a work-blog again now I’m afraid. Here is a project that I have been wanting to talk about for some time. I completed it about this time last year at Poke. I have been waiting for it to go live which I was pleased to discover the other day.

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.

Layout grid of exisiting ticket vendor xml data

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.

Screenshot of MCFC stadium opened in Illustrator

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.

MCFC stadium seating layout prior to cleaning

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:

Stadium Seat layout after cleaning process

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.

MCFC Stadium diagram after cleaning finished

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

Posted in ExtendScript, MCFC, as3, seat selector, work. Permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>