O2 Priority Sports YouTube Masthead
The YouTube Masthead is the large expandable banner on their homepage. Advertisers are encouraged to use YouTube video content using Doubleclick’s YTPlayer component. The launch of O2 Priority Sports showcases VCCP’s beautiful TV ad filling the whole 970 x 500 pixel space.
O2 Priority Sports… big logo, so you know what this is about!
Find the blue halos to discover Priority Sports
The launch of Priority Sports was a huge integrated campaign for VCCP. The YouTube Masthead being the centrepiece if the digital offering. The banners, posters and even the TV ad were designed to encourage users to download the app for their smartphone. All the banners had a form to submit your phone number and receive a text. The contents of the text would depend on whether you are an O2 customer and have a phone that supports the app.
Form on the right. Send your mobile number and get the app
Possible form responses:
- Invalid Subscriber
- Invalid Handset
- Duplicate Entry
- Success
A banners of many parts
Initial load for the banner is 50k. There’s some quite heavy content before the ad is expanded so I imported a polite loaded SWF containing the video assets and end screen. The expandable’s loaded SWF has the interactive carousel of phone screens and a copy of the form. Here’s how it was put together.
DoubleClick polite and expanding imported SWFs
Adding the hot spots
Hotspots on the video reveal content
Hot spots were added to the video prompting the view to see content. I set up a Vector in the Model with data for start time, end time and coordinates for each one.
private var _targetData:Vector.<TargetVO> = Vector.<TargetVO>([
…
new TargetVO(new Point(200, 250), 12.8, 15.8, FrameRefs.NIKE_FUELBAND),
…
]);
public function getTargetVO(num:uint):TargetVO
{
return _targetData[num];
}
Here’s the TargetVO:
public class TargetVO
{
private var _coords:Point;
private var _timeIn:Number;
private var _timeOut:Number;
private var _frame:String;
public function TargetVO(coords:Point, timeIn:Number, timeOut:Number, frame:String)
{
_coords = coords;
_timeIn = timeIn;
_timeOut = timeOut;
_frame = frame;
}
public function get coords():Point { return _coords; }
public function get timeIn():Number { return _timeIn; }
public function get timeOut():Number { return _timeOut; }
public function get frame():String { return _frame; }
}
The Target’s view listens to the Controller and responds to the current video time (which is reported every 40 milliseconds).
…
_controller.addEventListener(VideoTimerEvent.TIME, checkIfActive);
…
private function checkIfActive(event:VideoTimerEvent):void
{
// current visibility
var vis:Boolean = visible;
visible = (event.time > _vo.timeIn && event.time < _vo.timeOut) ? true : false;
// test if newly active
if (visible && !vis)
{
var dur:Number = _vo.timeOut-_vo.timeIn;
var d:Number = dur >= 3 ? 1 : dur/3;
alpha = 0;
TweenLite.to(this, d, { alpha: 1 });
// lets move from a random position to coords over duration of visibility
TweenLite.to(this, dur, { x: (Math.random()*100-50).toString(), ease: Quad.easeIn, overwrite: 0 });
TweenLite.to(this, dur, { y: (Math.random()*100-50).toString(), ease: Quad.easeOut, overwrite: 0 });
// fadeout
TweenLite.to(this, d, { delay: dur-d, alpha: 0, overwrite: 0 });
}
}
…
Bitmaps & sandboxes
Two copies of the YTPlayer are used to open the ‘gate’
When reviewing the scamps and seeing the video open like a gate I thought “Easy enough. I’ll create an snapshot when the viewer clicks on the video and use the BitmapData to animate the two halves open.” Well some testing early on suggested otherwise. Flash was blocking the BitmapData.draw as a sandbox violation.
The solution was to set up two YTPlayer components. One visible, the other muted and hidden. When the user clicked on the video it was paused, masks rearranged, and the second video made visible for the animated gate sequence.
O2 Priority Sports end screen
This is one of those projects that made doing banners enjoyable.