1

The latest (I’ve been so happy and honored to hopefully make this an annual project for me) Tour De France interactive map was a great ride. Last year’s map we all felt was a good start but if we had more time, there were ideas left on the table. As always, it’s great to meet with the Versus team and brainstorm some ideas on what to do for this year’s map. After a few conversations, we had a comp, an idea and I went to town. Versus usually gives me room to develop with creativity and there were multiple times I was able to give creative input and make a difference.

This project was built in Flex Builder 3, a pure AS3 project and I used a couple libraries to speed up development. As always, I use casalib, I used as3coreLib, greensock, and yes, the thePlatform PDK video player was used for video playing clips of each stage. I would think I stayed a bit more true to the MVC framework ideal than I ever have before (and not letting little details and ‘proper’ format get in the way).

This is the full page when hosted on the versus.com domain.

The 2010 Tour De France Interactive map

Here’s a view of the map when a user selects a stage and is viewing the stage detail view:

Versus.com Tour De France 2010 Stage Detail View

Clicking on any of the images above will take you to the current live site. I think the two images above show in a nutshell what the app was all about. The detail view has a stage image, stage description, video highlight of the stage course, an RSS feed view and some external URLs for more content per stage. The current structure of the versus.com website and this full stage map, has really filled the need for a ‘higher-level’ view of the tour.