Clint Hannaford - Portfolio

Greenseas: The Friendly Seas

admin — Wed, 12 Oct 2011 22:37:53 +0000

Greenseas: The Friendly Seas is a project all about befriending fish. Utilising face tracking and smile detection in Flash, users can charm the fish, increasing it’s friendship levels. The user has the opportunity to befriend the Longhorn Cowfish, the Tasmanian Spotted Handfish, and the Dugong, resulting in donations on their behalf for various marine conservation funds.

The user has to be careful not to scare away the timid creatures of the sea with fast movements. Once the user has befriended the fish through smiles, head tilts and tickles, they are given a photo of themselves and their new friend (captured when smiles are detected of course), to share with their real life friends on facebook.

The site uses a range of technologies and libraries, including Away3D, Facebook API, Robotlegs, Face Detection, Smile Detection and Colour Tracking.

A visualisation of the team developing Greenseas.

StringAR Showcase App

admin — Sat, 12 Feb 2011 23:08:54 +0000

String Labs approached Boffswana to assist in creating a Showcase iOS Application for their new technology StringAR.

Using our little green character Proto, we were able to quickly create a simple demonstration, that allowed users to touch anywhere on the screen and have him walk to that location.

You can download the String Showcase for yourself on iTunes.

Marc Ecko Digital Muse

admin — Fri, 29 Oct 2010 10:55:37 +0000

Marc Ecko had a vision of creating a multi-dimensional augmented reality experience and entrusted Boffswana to navigate through this very exciting and uncharted territory in terms of AR content and concept.

The ‘Digital Muse’ provides users an experience of intimate interaction with Lindsay Lohan in a way not seen with AR blurring the line between viewing and interacting with content.

Provocative footage of Lindsay shot for this campaign creates a fantasy narrative and reflects the traditional notions of the femme fatale, and the dangerous and intoxicating woman.

Marc Ecko and his talented team have been fun and inspiring to collaborate with, there has been no shortage of creative vision that is clearly seen in the overall campaign and site.

31136621 from Pleribus on Vimeo.

My involvement on this project began with initial prototypes, overall approach for the development team, and assisting the development team working on the website later in the project’s development cycle to help get it over the line, as well as past code brought in from other projects.

Below is a visualization of the team building Marc Ecko’s Digital Muse

me from Pleribus on Vimeo.

Samsung – Mr Know It All

admin — Wed, 04 Aug 2010 08:28:10 +0000

http://www.mrknowitall.com.au/

Boffswana were engaged by Mark (M&C Saatchi Sydney) to develop a website that connected with Facebook to allow users to integrate themselves and their friends into a live action video.

The result is Mr Know It All, a campaign about Samsungs new Social Hub phone, which allows customers to combine all of their social feeds into the one interface.

Mr Know It All knows everything, about everybody, in his social circle. It’s the Office meets Social Networking.

Samsung – Mr Know It All from Pleribus on Vimeo.

The site was built on a combination of the Gaia Framework and RobotLegs, and presented a number of challenging technical hurdles to overcome in a very short timeframe. RobotLegs allowed the development team to work seamlessly together on various components of the site and rapidly bring them together with little fuss.

A visualisation of the team developing the site:

Developing Mr Know It All from Pleribus on Vimeo.

Awards:

Gold for Best Microsite – John Caples International Awards.
Bronze for Best Use of Online Video – Adfest Cyber Lotus
Bronze for Best Integrated Cyber Campaign – Adfest Cyber Lotus

Clash Of The Titans – Release The Kraken

admin — Sat, 20 Mar 2010 00:08:42 +0000

http://clash-of-the-titans.warnerbros.com/release-the-kraken

Warner Bros. (US) commissioned Boffswana to let users “Release The Kraken!” as Zeus (Liam Neeson) bellows in the movie Clash Of The Titans.

My first commercial Unity3D project at Boffswana, the Augmented Reality application recognises the print out, and places a 3D scene on the paper. The cove environment extends into the paper as if it’s a window into another dimension. The highly detailed 3D Kraken emerges from the ocean to a dramatic soundtrack, and the user is able to move the scene, even pushing right into the world to get a closer look.

The user is also able to press S to have the Kraken swipe, and R to make the Kraken roar.

The site was developed to be deployed for other languages easily, through XML and external images.

Clash Of The Titans – Release The Kraken from Pleribus on Vimeo.

Drawing shortcut for MovieClip.graphics

admin — Mon, 01 Mar 2010 03:32:41 +0000

Thought I’d share this little shortcut that I hadn’t really come across before, which definitely helps to keep your code that little cleaner when working with MovieClip.graphics in Flash.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

this.grapics.lineStyle(1, 0x00000);
this.graphics.moveTo(10, 10);
this.graphics.lineTo(10, 20);
this.graphics.lineTo(20, 20);
this.graphics.lineTo(20, 10);
this.graphics.lineTo(10, 10);

this.graphics.beginFill(0xFF0000);
this.graphics.drawCircle(40, 40, 20);
this.graphics.endFill();

this.graphics.beginFill(0x00FF00);
this.graphics.drawRoundRect(40, 0, 40, 20, 2, 2);
this.graphics.endFill();

Can also be written:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

with (this.graphics) {
lineStyle(1, 0x00000);
moveTo(10, 10);
lineTo(10, 20);
lineTo(20, 20);
lineTo(20, 10);
lineTo(10, 10);

beginFill(0xFF0000);
drawCircle(40, 40, 20);
endFill();

beginFill(0x00FF00);
drawRoundRect(40, 0, 40, 20, 2, 2);
endFill();
}

Pretty simple, and surprised I hadn’t seen (or thought of) it before.

Replacing Events with AS3Signals

admin — Sun, 07 Feb 2010 09:14:53 +0000

I’ve been playing with AS3Signals lately, and think I will be replacing flash events with it on all future projects.

It’s so simple!

So what is AS3Signals?

AS3Signals is a lightweight replacement for Flash Events written by Robert Penner.

AS3Signals aims to reduces the amount of traditional ‘boiler plate’ code required to receive and dispatch messages in Flash.

Why use AS3Signals?

Writing custom events tends to be a bit of a tedious chore on most projects, and I know many developers approach custom Events in different ways.

Some choose to create a single flexible Event with a loosely typed payload (ie. data:Object), while others like myself, like to strongly type events with value objects wherever I can (resulting in many custom event classes per project).

AS3Signals practically does away with the need for custom event classes altogether, as you now simply append any number of parameters to your signal.

The time saved not having to write all of these custom events alone is reason enough to jump into AS3Signals.

AS3Signals also brings a few nice features that events don’t have, such as “addOnce” that automatically removes the listener the first time a signal is received, “removeAll” which removes all listeners of a given signal, as well as “NativeSignal” which allows you to map traditional events (like MouseEvents) to signals. Finally there is DeluxeSignal which adds the ability to get the target object of a signal, and enables bubbling

So how do I use AS3Signals?

John Lindquist has a video tutorial that sold the idea and simplicity of AS3Signals to me, and I expect just about any other flash developer who watches it.

I’ve included my own basic demo and source code below to illustrate just how easy they are to use.

Sample

You can click on the face icon to “hit” the player. The SignalsDemo.as class listens to the hit, kill and click signals from the Player.as class and prints messages to the textfield.

AS3 Signals Demo - requires Flash.

SignalsDemo.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

package com.pleribus.as3signalsdemo {

import flash.events.MouseEvent;
import flash.text.TextField;
import flash.display.Sprite;

/**
* @author Clint Hannaford
*/
public class SignalsDemo extends Sprite {

public var player:Player;
public var textOutput:TextField;

public function SignalsDemo() {

addPlayer();
addTextField();

// add signal listeners
player.playerHit.add(onPlayerHit);
player.playerKilled.add(onPlayerKilled);
player.click.add(onClickPlayer);

}

private function addPlayer():void{

player = new Player();
player.init();

player.x = 30;
player.y = 30;

player.buttonMode = true;

addChild(player);

}

private function addTextField():void{

textOutput = new TextField();

textOutput.x = 10;
textOutput.y = 100;
textOutput.width = 350;
textOutput.height = 200;

textOutput.border = true;

addChild(textOutput);

}

//Signal Handlers
private function onClickPlayer(event:MouseEvent) : void {

// Hit the player when clicked on
player.hit();

}

private function onPlayerKilled(message:String) : void {

textOutput.appendText(message+"\n");

player.playerHit.remove(onPlayerHit);
player.playerKilled.remove(onPlayerKilled);
player.click.remove(onClickPlayer);

this.removeChild(player);

}

private function onPlayerHit(message:String, health:Number) : void {

textOutput.appendText(message+" - health now: "+health+"\n");

}

}

}

Player.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

package com.pleribus.as3signalsdemo {

import org.osflash.signals.natives.NativeSignal;
import org.osflash.signals.Signal;
import flash.display.Sprite;
import flash.events.MouseEvent;

/**
* @author Clint Hannaford
*/
public class Player extends Sprite {

public var playerKilled:Signal;
public var playerHit:Signal;
public var click : NativeSignal;
private var health: Number;

public function Player(){

}

public function init() : void {

health = 10;

playerKilled = new Signal();
playerHit = new Signal();
click = new NativeSignal(this, MouseEvent.CLICK, MouseEvent);

with (this.graphics){

beginFill(0x000000);
drawRect(0, 0, 50, 50);
endFill();

beginFill(0xFFFFFF);
drawRect(10, 10, 10, 10);
drawRect(30, 10, 10, 10);
drawRect(10, 30, 30, 10);

}

}

public function hit():void{

health--;

playerHit.dispatch("Player Hit", health);

if (health <= 0){
kill();
}

}

private function kill():void{

playerKilled.dispatch("Player Killed");

}

}

}

New Years Resolutions

admin — Sun, 07 Feb 2010 04:18:30 +0000

I had set myself an array of New Year resolutions for the coming year, one of them was to update the tired old website, and bring it into the current day and age, having not posting anything for a over a year now.

Starting with a fresh new design certainly helps getting into the right frame of mind.

The plan is to update the website a little more regularly as a means to show off some of the latest work I am doing, and talk about some of the things I’m researching and learning in the process.

Having recently made the switch to Mac, I am finally diving into Objective-C for iPhone app development, and it’s proving to be quite fun, and a welcome change from actionscript.

For anyone who is also looking to dive into Objective-C and haven’t already made the leap, I highly recommend the Stanford University lectures freely available through iTunesU.

Course notes, assignments and handouts are all available from the course website.

I won’t be ignoring Flash and actionscript either, as I plan to look at some of the more interesting frameworks out there for flash over the coming months , such as PushButton Engine and Flixel for games, and things like RobotLegs and AS3Signals.

Coca Cola – Summer Blast

admin — Sat, 05 Dec 2009 01:34:39 +0000

[Site no longer online - see video below]

Players launch themselves into the air by timing the power bar to get maximum height. They are then able to steer themselves as they fly through the air with the aim of staying in the air as long as possible and scoring maximum points. Players steer themselves through the air bouncing off hot air balloons or finding up currents to gain extra air time. Collecting bottle caps and landing in a designated target area give you extra points.

Coke Summer Blast from Pleribus on Vimeo.

Wrigleys 5 Gum

admin — Wed, 05 Aug 2009 07:00:25 +0000

http://www.5gum.fr

Wrigley’s 5 Gum “Stimulates Your Senses” was the core objective of the new www.5gum.fr website.

The innovative site targets both the visual and auditory senses.

Boffswana was engaged to create a site utilising Augmented Reality to enable users to listen and control various music tracks as a sound mixer. Once three base tracks have been selected, users can modify the audio being played through the simultaneous use of three controlling markers.