Background

A design centre is an organisation devoted to the public promotion of design, emphasising its economical, social and cultural value, through workshops, seminars, publications, awards or exhibitions.

The Thailand Creative & Design Center (TCDC) was founded in September 2003, as a national initiative to support creative and design individuals and enterprises in Thailand and the region. The center is a key catalist in reexamining the root paradigms of “tropical lifestyle design”.

Mission

We were commissionned to conceptualise and implement a teasing website for the 10 weeks leading to the opening of TCDC. All of this with a very limited budget and short deadlines.

Concept

It all starts with an empty stage… Every week a new character appears, introducing a key aspect of TCDC. The goal is to tease and get on the designers’ radar without revealing too much. This microcosmos grows as TCDC’s Grand Opening approaches.

But first, we had to come up with a concept for each week and have it approved by TCDC’s board. It involved lots of meetings, brainstorms, proposals and counter proposals.

We had to craft a catchy headline, a story to tell and figure how to actually produce it. The deadlines were very short and the budget limited, so we had to be creative, plan well and execute fast!

Motion Capture

The budget didn’t allow for fancy cameras, green screens, lighting, costumes, make-up and actors. Our team, neighbours and a few friends were called in to move in front of the camera, impersonating visitors from all walks of life (security guard, hiso lady, artists, kids, …).

From the stills grabbed from the video sequences, we prepared vector illustrations. The illustrations then had to be modified for each keyframe to create the illusion of movement. A painstaking process, to repeat on a weekly basis.

Vector Outlines

The keyframes were used as reference to draw the character’s outline, frame by frame. Tedious? You bet!

The outlines were then filled and styled to look good. Since all characters and items on stage are vector images, loading times could be kept very reasonable.

Interaction

All illustrations were handed to our Flash developer as a storyboard. We indicated where the animation should loop, what should happen on click, when to wait, … At that stage, we sometimes got changes request from the client and had to redo the whole capture, outline and drawing!

The office would turn into a beehive until late in the night.

Script Magic

All characters have their own personality and walking pattern. Their movements are scripted for random actions and timing. It’s not dumb sequential timeline animation. Characters can’t bump into each other or furniture thanks to some ActionScript voodoo. Every item on the stage is interactive, reacting to clicks and mouse hovers.

Highlights

Clicking on some characters would make the whole stage zoom and center on them. For instance, clicking on the shopper provides more details about TCDC’s shop. A selection of design products would appear when clicking on “Be inspired by shopping”.

Action!

Here is our friendly security guard…

There’s no soundtrack so you can hum the tune yourself:

Mahna Mahna Mahna Macarena
Mahna Mahna Mahna Mahna Mahna
Mahna Mahna Mahna Macarena
Heeeeeey Macarena
Aaaaaaah!!!