xavi colomer's blog

A Conceptual Component design made in one afternoon

I decided this weekend to be a code weekend. That means I will spend a lot of hours in front of my Mac developing conceptual stuff I have on my mind.

One if this ideas was to develop a marketing tool for online video. There is a lot of companies producing it’s own TV series. This companies already have ways to monetize content on the TV ( ads and ‘subliminal’ products ) and monetize online content ( overlays, prerolls, etc… ) But I would like to add a new one, how to buy stuff that appears on this TV series?
It’s usual in this series to find cool flats perfectly decorated, people dressed cool, etc… Why not selling directly from the video, pointing you to the next shop or website where you can find all this?
From that question I develop the ‘conceptual’ tool you can see and use below. It’s quite easy to use, you only must roll over the tags and the ad will appear on the right.

How did I do it?

Well, since is just a conceptual idea I didn’t spent much time on architecture and ‘doing things right’. I just created a video player and a dock from scratch, then I put a Pin Manager over it with a collection of pins inside. Every Pin has instructions of when and how to move or hide, and ad related info.

To store the instructions I used a Dictionary, using the start time as the key, this would mean I only have one action per second, but I solved it by passing an array of actions.

Example of the pin instructions:
color = 0xFF9900
_image = “assets/images/GreyTop.jpg”;

instructions = new Dictionary();
instructions[ 10 ] = [ { type:'move', duration:0, properties:{ x:218, y:106 } }, { type:'show' } ];
instructions[ 11 ] = [ { type:'hide' } ];
instructions[ 13 ] = [ { type:'move', duration:0, properties:{ x:213, y:92 } }, { type:'show' } ];
…

Every time the video change the time ( update per second ) every pin looks inside the dictionary to see if has any action to do.
At the very beginning I was moving and testing every move step by step, but this was taking me so long, then I decided to create my Pin Editor.

How it Works?

Is very simple, I reproduce the video, when I press the mouse button on the video I trace the code of move on the specified mouse position, when I release the button I trace the hide code.

Mouse Down:
instructions[ 10 ] = [ { type:'move', duration:0, properties:{ x:218, y:106 } }, { type:'show' } ];

Mouse Up:
instructions[ 11 ] = [ { type:'hide' } ];

The only work left is to copy and paste the generated code into the class without any modification

Note: By default all the generated instructions has a duration of 0, this means a direct positioning, but in order to have a smooth positioning the duration can be change, as an example you can see the first seconds of the video looking at the cup Robin Williams is holding on his hand.

So for each pin I reproduce the video once to generate the instructions for each pin, and one last play for correcting any wrong move for any pin.

To correct the position I just pause the video and since I put the current time on the fake scrubber and when I move the mouse over the screen I get the current mouse position, it’s very easy to find and correct the wrong pin position

Where to go from here?

First of all this is only a conceptual component, so in case of developing it for real, I should spend a lot more time on it.

There is a lot of things to improve this component, a more precise timing for the instructions would be great.

Finally and obviously sharing in social networks is essential in order to maximize the success of any campaign.