NFL Seattle Seahawks Media Player

(Click Video To Open in YouTube)

NFL Seattle Seahawks Media Player (0:24)

NFL Seattle Seahawks Media Player (0:24)


NFL Buffalo Bills Media Player

(Click Video To Open in YouTube)

NFL Buffalo Bills Media Player (0:19)

NFL Buffalo Bills Media Player (0:19)

What is this piece?  This project was a media player for the NFL to be used on their new site.

Why is this in my portfolio?  This was my first really large JSON data-driven project. The data and all of the visual assets would be loaded at run time.

What was my part in this story?  They needed a media player to be ‘skinnable’ to match designs on each of the NFL teams. My work was to make a player for two sites to show the range of how ‘skinnable’ the player could be.

I began with two different Photoshop designs and needed to figure out how to make the 'skinnable' player from these variations.

The player autoplayed when the page loaded. The featured clip loaded and navigation updated to indicate which item in the sequence was playing. The user could stop or resume the auto play, as well as navigate directly to any of the target items.

For the Buffalo Bills, the bottom navigation was five images surrounded by a red indicator with an up arrow above it. The play button toggled between play and pause.

For the Seattle Seahawks the bottom navigation was five numbered buttons and a play/pause button. It needed to autoplay when the page loaded and indicate which item was currently running.

I started with class interaction & collaboration design using UML on this project and reviewed it with another developer in San Francisco so we could make the best, most extensible design given the project’s scope.

The text, buttons, and links were dynamically loaded to overlay on the media player.

All of the data in the player was formatted as JSON and loaded externally. The player compiled with only the bare ‘skin’ of that particular team, and all other images, buttons, videos, placement of each item, were determined externally via JSON.

Software:  Adobe Flash Builder (Flex Builder) and Flash, Photoshop, Aptana Studio