vault.ncaa.com : under the hood of a cool Flex project.

Thought Equity Motion and NCAA two days ago officially released the Ncaa Vault. A cool Flex app backed by an incredible video database with awesome metedata about each game…and released just in time for March Madness.

Here are a few of the announcements and online articles describing the services:

NCAAÂ® and Thought Equity Motion Unveil First Ever Video-Powered Vault for NCAA March MadnessÂ® – by Thought Equity
N.C.A.A. Tournament Goes Online, Clip by Clip – by the New York Times
Say Hello to NCAA Vault, Adieu to Productivity – by Wired

In fact with the Vault you can have a URL right into a specific moment of any game and Wired picked out a great last second tying shot.

The twittersphere feedback is also pretty impressive.

This is the most visible Flex app I worked on :-) Late January Cameron Pope contacted me to ask if I could help on a Flex project for NCAA and Thought Equity. The funny part is that I didn’t know that Cameron was such a great Flex developer, I met him via the Denver Ruby on Rails User Group (derailed) and I also didn’t know what NCAA was (don’t shoot, I didn’t grow up in the US and we don’t have TV). So when I asked my father in law about NCAA and realized it was about Basketball I was intrigued by what type of application we needed to build. Cameron showed me the mockups built by Donny Wells which is just an awesome graphical designer. These mockups where just incredible and then I was presented the video service technology the Thought Equity Motion team put together, and I was just blown away and though that this would be a cool project to work on.

Cameron was the main Flex developer and I just worked part time on Monday’s on this project. If you need and incredible Flex developer just contact Cameron.

Now let’s dive more into the Flex nitty-gritty details:

For the mvc architecture we used the Swiz Framework and this turned out to work exceptionally well. Swiz sports some dependency injection features that can be enabled via the [Autowire] tag and I was surprised when I realized I could also just use that feature in an item render. Let’s look at a little detail…For the play by play timeline if a play is in the future it is displayed in bold:

So each line of the timelime is rendered by the TimeLineItemRender and you can just autowire the model which contains the playhead position.

      [Autowire]
      [Bindable]
      public var vaultModel:Vault;

The we can set the style name accordingly based on the play’s start time and the current playhead position:

   styleName="{data.startTime < vaultModel.playheadPosition ? 'past' : 'future'}"

The style of the application was created by the designer and Cameron did a great job reproducing it using Degrapha for skinning () using an approach similar to this example (example source)

Most of my work was around the searching, bug fixing and general architecture overview. We took a similar approach to the one I described here in order to avoid most of the server round trips during searching.

The Flex app is just a pretty face, behind the scene Thought Equity provides an incredible services that they will expose in many ways, the start can be seen here and all that data will be able to be accessed via API and other means.

This was a short but incredible project for me, the guys at Though Equity have such an incredible vision on how to turn these sport videos into something so much bigger! Thank you guys for getting me on board.

Enjoy!
Daniel Wanja

vault.ncaa.com : under the hood of a cool Flex project.

Related Posts