Louis Vuitton Pacific Series 2009 Auckland New Zealand – The Silverlight Story
Introducing https://lvps09.com …
It is not everyday that the best sailors on the planet set up shop 150 metres from your work and race each other over a two week period but that is exactly what is happening for me right now.
For two weeks - 30 January to 14 February 2009 - Auckland Harbour will host yachts raced by leading international sailing teams. This time it’s a completely new regatta - the Louis Vuitton Pacific Series.
Ian Taylor contacted me just before Christmas to see if I could help his team pull off something quite special. Ian had obtained funding to broadcast the event using entirely real-time digital graphics.
Dunedin-based company Animation Research has undertaken a daring project that will see the two-week regatta broadcast entirely in a virtual format. It is believed to be a world first for a live sports broadcast.
Ian had organised to broadcast the regatta on Freeview and live streamed at TVNZ. In the rush before Christmas TVNZ, Ian and I started brainstorming to see what we could achieve for a unique web experience for the event.
When we came back in the new year it became clear that we weren’t going to be able to get extensive customisations in at TVNZ in the timeframe so Ian chose to build some race highlight packages to “show off” his vision for a rich interactive site for online sport coverage. This is where I fit in. Ian came to me with a functional Silverlight 1 prototype that his team had built that showcased his vision and it was my job at this point two weeks before the event to work with his team to “productionise” and deploy a site on Microsoft infrastructure.
Here are a couple of our early concept drawing that we discussed to “visualise” the draw and the racing that was taking place.
One of the surprise pieces that came out of this work was the “extra” section which uses a Surface Like, gesture and touch based interface. I had been experimenting with this on a HP touchsmart machine running Windows 7 and it works a treat.
To build this I leveraged Michael’s Silverlight Surface demo code. Databound it and enhanced scaling and video playback.
After showing it to professional photographers at the Louis Vuitton event they became excited about using deepzoom and this display to present some of their high resolution photos on the web, check it out. These guys sell their images so they don’t want them sitting in some in some browser cache somewhere. yeah you can still screen capture but good like putting all the small .jpg’s back together from the deepzoom.
Incidentally the “official site” for the event is built on Flash 10 (yup I had to upgrade my Flash version to view it too). The creators of this site in Paris want to link to our content to provide a “richer” experience for their audience. I thought about how to do this as the flash site doesn’t support deep linking and is a fixed size.
luckily I built a scalable UI for lvps09.com so I was very easily able to mock up a view that carried through the official site look and feel for them to link to.
If I had to list any points that I’m disappointed about to date I’d say that there are two main things.
1) I didn’t get time to move the domain to the servers where the site is being hosted so I’m using horrible domain clocking with Frames, which messes up titles and search engine optimization and doesn’t allow me to provide the IE8 meta tags or publish a web slice for the application.
2) The 3d animation video has been heavily interlaced for TV broadcast and is written to analog tape in standard definition quality before the highlight packages are created. Both TVNZ and I have struggled to make it pop on the web and you do get the horizontal lines during quick movement in the highlights.
A few things in the end made this application very flexible and extended my experiences with building production code in Silverlight 2. I will do another blog post and channel9 screen cast getting into the nitty gritty details of this project once the dust has cleared a bit but
Download the video (104MB)
For more on Visual State Manager and Custom Controls check out Karen Corby’s fabulous blog:
- Parts & States Model with VisualStateManager (Part 4 of 4)
- PDC: Silverlight 2 Control Model Session (PC29)
below are a couple of tidbits that I just had to mention now.
1) Visual State Machine & Custom Controls ROCK!
I built a Flag control class that I could databind using LINQ. The flags were converted from Adobe Illustrator to XAML and included as states inside a custom control.
A snapshot of the xaml for this looks a bit like this…
2) LINQ binding to XML data sources makes things incredibly flexible and dynamic.
Please visit https://lvps09.com and watch some race highlights and drop any opinions, questions or comments you have about the site here.
Enjoy!