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.
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.
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.
Adding the hot spots
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
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.
This is one of those projects that made doing banners enjoyable.