» , ,

Taking a line for a walk

O2 Home Broadband Start screen

O2 Home Broadband Start screen

Before Niggles & Narks, in 2009, VCCP created an interim look and feel for O2’s broadband offering. This was fairly much a scribbly line drawing of a house with an equally scribbly headline. O2 wanted to show their broadband deals in-store, so I was teamed with a freelance Copywriter (Hi Dianne :-)), and we went about creating a sequence of screens for 19" touchscreens. Expanding and animating this simple identity.

 

So what the idea?

Seeing that simple line drawing in the poster reminded me off a cartoon I saw growing up. With a bit of searching I found it on YouTube here. It was the way the character animated out from the single line. What if our O2 house, and other broadband related items, formed from a single scribbly line as the viewer selected different screens. What these scribbly lines needed to be vibrant was a hand-drawn shake like Roobarb And Custard.

Switch Easily scamp with light switch line drawing

Switch Easily scamp with light switch line drawing

Dianne and I sat and mapped out some ideas for the screens. Then I scamped them up. A heart for home, a beatbox for music, space invaders for games and a light switch for ‘switching.’

Home, music, games and WiFi line drawings

Home, music, games and WiFi line drawings

 

Screen design

Screens were designed specifically for 1280x1024px resolution (Although I did create some flexibility in Flash as I was sure this would eventually be needed on a different size screen!).

O2 Home Broadband Start screen with boombox

O2 Home Broadband Start screen with boombox

The scribbly line remains at the same level throughout. The hand-drawn aniation effect was also applied to the borders of buttons to help destinguish between content and interaction points.

Find Your Perfect Package screen

Find Your Perfect Package screen


Pro Homebroadband package with badge in corner

Pro Homebroadband package with badge in corner

To add to the hand-drawn ‘feel’ I added chalk board style ‘rubbing away’ transitions between screens.

‘Rubbing away’ transition between screens

‘Rubbing away’ transition between screens

 

Using BitmapData to ‘Rub away’ the screen

To create the chalk board style ‘rub away’ tranisition I painted 48 PNGs using a rough brush in Coral Painter. These PNGs were then imported into Adobe Flash as a sequence of keyframes in MovieClip MaskMC. When the the user changes screens the function updateAndSwapToBitmap and the current content is stores as BitmapData.

…
private var _page:Page;
private var _maskRef:MaskMC;
private var _canvas:BitmapData;
private var _ref:BitmapData;
private var _bitmap:Bitmap;
private var _mask:Bitmap;

public function updateAndSwapToBitmap():void
{
  clearRefBitmap();
  _ref.draw(_page);
  _bitmap.bitmapData = _ref;
  _bitmap.smoothing = true;
  _page.visible = false;
  _maskRef.wipe(false);	
}

private function clearRefBitmap():void
{
  _bitmap.bitmapData.dispose();
  _bitmap.visible = true;
  _ref.dispose();
  _ref = null;
  _ref = new BitmapData(1280, 1024, true, 0x00000000);	
}
…

The mask MovieClip when activivated by the wipe function will play through the frame updating the BitmapData mask as it goes. When the playhead reaches the last frame the content is swapped by calling swapToPageMC and the playhead reversed to reveal the new screen.

…
public function wipe(forward:Boolean):void
{
  _forward = forward;
  addEventListener(Event.ENTER_FRAME, onEnterFrame);
  (_forward) ? nextFrame() : prevFrame();
	
}

private function onEnterFrame(e:Event):void
{
  _loc.updateMask();
  if (currentFrame==totalFrames)
  {
    removeEventListener(Event.ENTER_FRAME, onEnterFrame);
    _loc.swapToPageMC();
  }
  else if (this.currentFrame==1)
  {
    removeEventListener(Event.ENTER_FRAME, onEnterFrame);
    dispatchEvent(new WaitForMask(WaitForMask.WAIT_FOR_MASK));  
  }
  else
  {
    (_forward) ? nextFrame() : prevFrame();
  } 
}
…
public function updateMask():void
{
  _canvas.fillRect(_canvas.rect, 0);
  _canvas.draw(_maskRef);
  _mask.bitmapData.fillRect(_canvas.rect, 0);
  _mask.bitmapData = _canvas;
}
…

Finally. When the playhead has returned to frame one the custom event WaitForMask is fired informing ther presentation that it is to return to its interactive state and continue.

 

If you have Adobe Flash Player you can see a demo of the touch screen presentation here. Remember it’s designed for fullscreen and local PC use, so please be patient while it loads. :-)

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Posted 22nd April, 2014 at 9:26 pm | Permalink

    Hi Alan, We’re a digital agency based in Wellington and via connections in the UK we’ve been told that you’ve arrived /are arriving in Wellington. Presuming you’re looking for work here? We’re looking for digital designers now; illustration and coding understanding a major plus. Please be in contact if you’d like to meet and discuss. Thanks Bert

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>