Peek inside the home of the British Prime Minister

Aral Balkan creates a virtual tour of the Prime Minister's office in Flash 8 for 10 Downing Street.

In the past few months I've been working to create a virtual tour of 10 Downing Street — the home of the British Prime Minister — for the Prime Minister's office in the UK. I'm happy to report that the tour, which I developed in Flash 8, is now in public beta on the 10 Downing Street web site.

As some of you know, I stopped doing hands-on development and programming for clients at the end of last year to concentrate on my my community projects as well as my consulting and training work. However, when my good friend Andy Budd mentioned that the Prime Minister's office was looking to update their Quicktime VR-based virtual tour to something much more engaging and interactive using Flash, I thought it was too interesting a project to pass up. So I literally rolled up my sleeves and decided to take it on.

By all means, it has been an interesting project and looks like it will continue to be as we evolve it in some exciting ways in the coming days and months.

One of the unique aspects of the project was that it was actually built on a shoe-string budget (under £10K). This necessitated some creative thinking. The tour contains eight rooms and each room has several interest items (hot spots) that you can click on to get more information. I knew that the budget would not permit for a lengthy photo shoot so I had to fit it into a single day and mostly use available light. I hired photographer Caroline Malloy and panoramic photographer Rohan Perera — both of whom did a stellar job, working tirelessly and passionately under our pressing deadline. I ended up directing the eight-hour shoot in which we took a total of 1,259 photographs. They include 53 panoramic images, each of which is made up of 14 separate photographs. We used available light for the panoramas as lighting for each of the separate images would have easily taken up a week of production time and eaten up all of the available budget. This did mean, however, that I had considerable post-processing work to perform in Photoshop. (But, hey, any excuse to spend time in Photoshop, right?) We did do minimal lighting on some of the trickier detail shots (of which there were 742 shots taken on the day) but everything was done in strict triage. Once the initial post-processing of the images was complete, I went in a second time to visually color match the images with the actual rooms to make sure that they are as true-to-form as possible.

This project marks the first time that Flash is being used on the Prime Minister's web site and that, in itself, is quite exciting.

I decided to use Flash 8 for this project several reasons. The project brief called for an interactive experience and I wanted to push the boundaries a little on the virtual tours I had seen on the web during my research. Also, the bitmap features in Flash 8 made it possible for me to overcome a critical performance issue.

First off, I wanted the interest items to have soft glows around them. This proved to be harder than I first imagined due to performance reasons. The panorama component in the project handles real-time perspective correction on the images so you do not get fish-eye distortions. To do this, however, it slices the image up into about a hundred pieces and, in real-time, positions those images. (Actually, it makes about a hundred copies of the panoramic image and uses masking to display a little strip of each.) As you can imagine, this is terribly taxing for the CPU. When I added soft glows using the Glow filter in Flash 8, I found that the movie ground to a halt. (The glow itself was duplicated a hundred times in order to fit the perspective correction.) Instead, I was forced to render the glows as bitmaps in Photoshop and bring them in that way.

Also, I wanted to have the user interface be as invisible as possible so that users could explore the residence without the interface getting in the way. I decided to use a sliding panel to contain the room description, interest item details, and navigation neatly out of the way until needed. I didn't want even the tiny amount of real-estate that the panel took up when closed to block the panorama completely so I made the background of the panel slightly semi-transparent. When open, however, I didn't want the user to be distracted by the panorama in the background and I wanted to visually present to the user that the panel is modal. To kill two birds with one stone, I implemented a rack focus effect using the Flash 8 Blur filter. Again, however, I ran up against the performance issue due to CPU-intensive panorama component. (It is normal to grind the Flash player to a halt if you ask it to blur out a hundred 4,000 pixel-wide images, each with mouse event handlers active on them.) This led to me come up with an optimization. Basically, I decided to write a class using the Flash 8 bitmap features to take a snapshot of only the visible portion of the panorama, remove the panorama from the Stage and blur out this snapshot instead. With the panorama not taking up any CPU, I was able to animate the panel so that it bounces open smoothly.

As I mentioned earlier, this is the first time that Flash is being used on the Number 10 web site and, from what I've been hearing, they're very happy with the results.

The tour is scheduled to come out of beta sometime in early September and if you do notice any quirks, please feel free to email me or to leave a comment here.

There are plans to continue improving the tour and I would personally love to see accessible versions developed that make use of the multimedia capabilities of the Flash Player (the current version has an alternative HTML version for users with accessibility requirements -- this is, unfortunately, all that the budget for the first release allowed for.) Plans include the use of voiceovers and narration as well as alpha channel video in future updates.

Check it out here: 10 Downing Street Virtual Tour.

Comments