At the same time we got more excited as we saw that changing perspectives and moving around in these 2D planes resulted in an exciting interaction, so we knew it was a worthwhile endeavour to promote our challenging concept.

Conceptual premises

When we embarked on the concept phase for the Canon EOS 400D (an entry level DSLR camera) campaign for on- and offline, we took our time to get into a photographer’s mind; we visited photo exhibitions, dug around photography forums and talked to amateur and professional photographers alike.

One thing that kept surfacing was something that many individual people mentioned - once you get really into photography, your vision and perception changes - you start to see photos, frames, angles. This was something we found an essential component of photography and that everybody "into it" experienced, yet at the same time this happened in an almost un-replicable fashion for interactive.

As we still had the same goal in continuing the previous communication for the EOS 400D (Welcome to the playground), we wanted to bring people into these playgrounds and give them the experience of a photographer whose vision has already changed to seeing photos over photos, shots, angles, frames, compositions, perspectives.

We had the abstract idea that we wanted to create an environment with many individual photos that actually produced a composite whole. The contrast of flat photos making up a 3D explorative space excited us from the start, so we set out to make some quick prototypes to evaluate performance, interaction and to possibly get more visual ideas or clues as to what we were dealing with.

Figuring out what you’re dealing with

Thanks to Papervision, putting together the first simple prototype (no preloader, use cursor keys) was a quick exercise and yet it gave us a lot of answers. It ran quite smoothly on relevant machines, but we also saw that using smoothed bitmaps wouldn’t work out performance-wise, so we needed to go with unsmoothed ones for the site – there’s not a lot you can do about it until Flash Player gets some decent hardware acceleration.

The second prototype (no preloader, funny interaction) showed a bit more of the actual exploration then the first one. This was especially useful to show to the client (as rough as it was) since it was hard for some people to grasp how the idea would work in the end - a prototype says more then 1000 Powerpoint slides.

At the same time we got more excited as we saw that changing perspectives and moving around in these 2D planes resulted in an exciting interaction, so we knew it was a worthwhile endeavour to promote our challenging concept.

Finally, for the print campaigns we had a photo-shoot coming up in Spain, where the 3 different playgrounds were going to be shot.

To achieve a strong integration of offline and online, we wanted people to explore the same scenarios that they might have seen in print, so we went with an additional photographer to the shoot and took our own pictures, more than 1000 of them.

Can't do that by hand...

Previously, we had thought about how we required those pictures to be taken and especially how the team of designers & developers could collaborate more closely to build the environments in the 3D space.

The idea of taking hundreds of images and placing them via code or hand edited XML into the scenarios didn’t seem so tempting at all, and we actually wanted the Art Director and Designers to be able to play around with the 3D engine in order to develop ideas and gain insights in what worked better visually & interaction-wise and what didn’t.

We often follow the idea of developing visual tools for individual problems or ideas to enable non-programmers to contribute to code related issues. This has proven very useful as it widens the amount of people who can contribute to a certain issue and sometimes the designers are the best for solving e.g visual problems that take place in a coded environment.

It also makes it easier to distribute work amongst the team if such issues can also be tackled by e.g. a designer or even a project manager, content manager etc...

Furthermore it blurs the boundary between the disciplines, bringing developers and designers closer together; a topic which, in recent years, has been pushing increasingly to the fore, especially with the growing number of developers working on projects focused on graphic/motion design, experience and interaction and designers well-versed in interactive projects developing a different understanding of how graphic design influences interaction, user experience and the chances that working e.g. with generative visual systems gives.

...can do it with a tool

Consequently, employing this concept we realized that we needed to build a visual 3D editor that could import the relevant photos from the photo shoot, composite them in the 3D space, generate the compressed and resized Jpegs, and spit out the 3D scene data.

We didn't go down the route of using the Collada format together with software like 3DMax as we wanted the tool to be as simple and intuitive as possible so that only a short training period would be required for our design heads to be able to build the environments. Rather we wanted to create an editor specifically for our purposes.

As the huge amount of pictures and their high resolution would cause Flash to choke memory wise, we used Java to build the editor. The workflow goes like this:

You start out with an empty scene, import a photo to it and then extract parts of the image.

Once you have made an extract, you can move or rotate it around the x/y/z axis, scale it and employ some basic image manipulation such as blurring, contrast, brightness, exposure.

This way we used a high-res background image, made a couple of crops and composed them to replicate the arrangement of the original space, so we rotate facades according to their perceived position in the original scene. Then we import some more photos that go on top of this "base canvas", again arranging them etc.

For each scene, the editor could also alter camera settings and see what would work best in the respective scenarios. With the click of a button, the whole scene gets exported with the additional option to save high resolution images on top of the optimized and compressed crops, in case we ended up wanting to tweak some of them in Photoshop.

The whole shebang then opens in an instance of the website so that it’s quick and direct to test the built environment with the final interaction in place, providing immediate feedback regarding interaction and composition.

See a demo of the editor here.

Looking back

It would be a lie to say that it was a piece of cake from hereon using the editor; many hours and days have gone into the compositions, but I believe that it was the only possible way to approach the project and, in this way, the whole process enriched the thinking and understanding of everyone involved.

On top of that, it took a great amount of time off the developers' shoulders, freeing them up to focus on other aspects. It’s not that obvious to see in the final product but one of the trickier parts was getting the interaction inside the environments right, in particular how mouse movements over different planes in different depths result in camera movements. A very fluid and smooth feeling was what we intended to achieve, and we didn’t want to use intruding UI controls.

So, how do you actually dive into a 3D scene with a 2D mouse? We read in which Z-depth the plane is that you are hovering above with your mouse and then calculate a Bezier that continues your current motion with speed and direction towards that x/y/z position - this way it genuinely feels as if you are floating freely. The gentle and intuitive camera path follows a natural motion.

Looking back at the process we went through, the development of the prototypes helped immensely in procuring a clearer vision of the interaction problems, the performance and enabled us to demo it to the client.

Having an editor for non-coders to work with was invaluable since it meant that we had a visual rather then a number-based tool with which to build an environment; resulting in a much quicker and more direct approach.

The moral of the story: Prototype, prototype, prototype and develop your own tools, this can make your life (and the clients) much easier. And try to do something a bit differently each time; this way you don't get bored so fast.

About the Author, Manuel Dahm
Head of Interactive Media, Media Catalyst

Manuel Dahm was studying graphic design when his younger brother Matthias showed him the website he had built with Flash 3 - and ever since then Manuel was hooked. Enthusiastically embracing this new wonderful tool, he went to study media design and began freelancing as a creative flash developer.

Over the last 8 years he worked for agencies such as Scholz+Volkmer, OgilvyInteractive, Leo Burnett and clients like Mercedes-Benz, Nintendo, Vodafone, London Science Museum and others.

Currently he is employed as Head of Interactive Media for Media Catalyst, Amsterdam; where he leads the interactive projects for Sony-Ericsson, Canon, Philips and others, contributing to conception, technical consultancy, and design input. He is leading the flash team for all projects.

Beyond the world of Flash, Manuel is interested in physical installations, sensor technology and graphic design, in his professional work, the unity of design and code, making it possible to "feel" interaction, is one of his main interests.

All rights reserved © 2000 - 2016 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Cookie Policy -  Advertise -  About FWA -  Contact