Clint Hannaford - Portfolio

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.

Optus Whale Song

admin — Wed, 03 Jun 2009 23:42:52 +0000

http://www.optuswhalesong.com.au

Boffswana enjoyed collaborating with M&C Saatchi and Mark for their client Optus and their new brand campaign Whale Song.

Showing off skills in Realtime Papervision3D in Flash we were responsible for the creation of the underwater environment including the modeling, texturing and animation of the whale as well as the creation of the environment it lives in.

Boffswana created the interface to ‘communicate’ with the whale. By pressing various keys on the keyboard, orchestral music is played through the underwater speakers creating attraction points within the environment that the whale will want to swim too. The attractiveness of these points in the environment to the whale varies with user’s activity on the keyboard. The whale has a series of movements and levels of activity that are relative to the intensity of the user’s interaction with the keyboard and the composing of music for the whale.

Optus Whale Song from Pleribus on Vimeo.

Awards:

Site of the day – FWA – Favourite Website Awards
Silver – Microsite Category – 32nd John Caples International Awards

Jack Links Beef Jerky – Living Sasquatch

admin — Sat, 18 Apr 2009 01:50:23 +0000

http://www.livingsasquatch.com

The ground breaking project gives you the ability to ‘mess’ with the Jack Link’s Beef Jerky Sasquatch in a whole new way by bringing him out of your computer, onto your desk!

You can choose from 35 different Sasquatch animations and add them to a timeline and record your interaction with the Sasquatch through an intuitive and easy to use drag and drop interface.

You can even add speech bubbles to give Sasquatch a voice!

Once these short movies have been created, you can send them to friends and add the movies to the public gallery. Movies in the gallery then receive “Stomps of approval” or votes from other viewers of the site.

Living Sasquatch – Papervision – Augmented Reality from Boffswana on Vimeo.

It’s movie making with a difference where you are the writer, editor, director and co-star with your very own 3D Sasquatch.

Awards:

Site of the day – FWA – Favourite Website Awards

Boffswana – Augmented Reality Demo

admin — Fri, 24 Oct 2008 14:46:11 +0000

http://www.boffswana.com/news/?p=392

The original Augmented Reality demo of Boffswana’s Proto Character taken from the desktop to the desk using Flash. Proto became an instant mascot for Boffswana with the demonstration video popping up on blogs around the world and receiving over 279,000 views. He has since been used to demonstrate all manner of technologies including Boffswana’s latest demos in headtracking for 3D VR display.

Papervision – Augmented Reality (extended) from Boffswana on Vimeo.

Save Your Sensible

admin — Mon, 06 Oct 2008 06:51:34 +0000

[Site no longer online. See video below]

GPY&R came to Boffswana to develop an online interactive 3D character and Facebook Application for their client Cadbury Schweppes Australia. The campaign for their Spring Valley brand, involves ‘finding and meeting’ your own ‘Sensible’; a comical character that inhabits us all, is directly impacted by our lifestyle choices and exists to remind us that we occasionally need to do something good for our bodies. The aim of the site is to allow users to see and interact with their own Sensible, inform their Sensible as to what they have been up to, and then care for their Sensible.

Save Your Sensible from Pleribus on Vimeo.

Awards:

Site of the day - FWA – Favourite Website Awards
Silver – MADC Best Microsite 2009
Bronze – MADC Best Integrated Campaign 2009
Bronze – One Show Interactive 2009
Finalist AIMIA – Best Advertising or Marketing 2009