MSN have just launched a stunning series of interactive guides which bring the compelling history of the Battle of Britain to life. The guides were created for MSN by Microsoft software development experts Shoothill, and are composed of three rich interactive elements:

A photo and document archive contained within one single image – the iconic shot of St Paul’s with London blazing in the background – which users can zoom into to see hundreds of compelling pictures from The Blitz in great detail. This Deep Zoom mosaic was built in Microsoft Silverlight and features images, captions and scans of original secret documents detailing the Luftwaffe’s bombing missions.

The second feature in the series is Shoothill’s custom-built ‘TimeMap’, an immersive educational application built in Microsoft Silverlight which overlays historical maps with those of the present day on a live Bing Maps Platform.  Using the ‘TimeScope’ feature, users can see historic German target allocation maps and original aerial reconnaissance photos belonging to The Imperial War Museum, showing the Luftwaffe’s bombing targets in London and Coventry from gas works and power stations to water works and docks.

Lastly, the guide also allows Users to explore a series of three interactive image walls (based on Microsoft Photosynth) of some of the aircraft that took part in the Battle of Britain, including the Hawker Hurricane I, the Supermarine Spitfire Mk Vb and the Heinkel He111 H-20.  Users can navigate around these images in a virtual tour to see these incredible planes from every angle.

Rod Plummer, Managing Director of Shoothill, said: “We were thrilled to produce an interactive, educational series on the Battle of Britain as it’s a great counterpart to what we’ve already done with our Berlin TimeMap and the recent Churchill Deep Zoom exhibit we completed for the Imperial War Museum.

“The chance to create the Battle of Britain TimeMap in Silverlight means that we’ve been able to integrate Microsoft’s Deep Zoom technology with our own custom-built TimeMap application to offer a hugely enhanced and deeply compelling learning tool. The fact that the Luftwaffe maps showing their planned bombing locations hasn’t been seen before is also hugely fascinating! When we combine these features with our main Deep Zoom mosaic filled with hundreds of pictures of The Blitz, and the unique Photosynth images of RAF fighter planes, we’re able to offer Users a complete guide to one of our country’s most significant historic events.”

Alastair Bruce, Senior Content Manager at MSN UK, said: “The Battle of Britain feature brings together archive documents, photos, target maps and the latest Microsoft technology to provide an engaging and absorbing experience that helps our users find out more about a crucial period in our history.”

View the Interactive Guides for yourself!

In the past few posts we’ve explored Deep Zoom to explain what it is, how you can use it and what free tools are available so you can try it yourself. There are some great examples of how Deep Zoom’s been used so far, so we thought we’d pull some of the best ones together with recommendations from within the team. Comments welcome!

Here are the top 3 Deep Zoom demo’s from Michael McClary, Platform Strategy Advisor at Microsoft:

	“The US presidents was created by Metia – it’s like a Russian Doll of Presidents”.
	“The MassEffect II advert was a huge success and uses smooth streaming as well as Deep Zoom. You can zoom right into the characters features”.
	“JumpMan includes a lot of nice features including the ‘Tour by Favourite Shoe’”.

Catherine Heller, Senior Technical Evangelist has some favourites too:

	“One of my favourite deep zoom photos for showing the smoothness and responsiveness of large images is Cell Phones, from Chris Jordan’s Running the Numbers works.”
	“The Yosemite Extreme Panoramic Imaging Project illustrates the raw horsepower of Deep Zoom (zoom into one of the semi-circles until the images appear, and then zoom into one of those)”.
	“I love the visual cues displayed on the Matterhorn Deep Zoom that highlight areas to zoom into (turn on Points of Interest)”.
	“The Kelly Blue Book Perfect Car Finder is a great example of a useful and practical experience”.
	“One of the most innovative Deep Zoom experiences I’ve seen is the Johan Lafer Recipe site on MSN Germany. As you zoom in to the photos on the right, the recipe text starts to appear until it shows a single recipe photo and text; some of the recipes have a photo-strip at the bottom with step-by-step instructions you can click on to expand (try the chocolate ice cream)”.

“I love the search and navigation within search results of the JumpMan experience Michael called out. Definitely the best social mosaic I’ve seen so far”.

Sara Allison, Underbelly Editor:

“My personal ‘stand-out’ example of Deep Zoom is  A website named desire, whose characters make up a team needed to create a website. Not sure all websites need a team this big, but the idea behind it is great, I can lose an hour or so at a time exploring the characters and what they’re doing, and always find something new each time I take a look around.”

“Finally, possibly the first use of Deep Zoom as a standalone exhibit inside a museum is the Winston Churchill exhibit at the Imperial War Museum in London.Software developers Shoothill were given exclusive access to the archives of the Imperial War Museum (Churchill War Rooms) the Baroness Spencer-Churchill Papers and the Churchill Archive Trust as well as the photo archives of the Press Association to build a comprehensive “Tribute Wall” to the great man (there are even personal letters and his school report in the Deep Zoom exhibit).”

So you can see there are some fantastic things you can do with Deep Zoom – and it’s all free! Here’s a reminder of the free Microsoft tools you need:

Visual Studio Express

Silverlight

Deep Zoom Composer

Enjoy!

The good news is that many of these tools are free so you can try out the technology and build applications based on Silverlight and Deep Zoom without having to spend a penny. In this post I’ll give a brief description of the different tools as well as options for free versions and trial versions.

Building Silverlight Applications

Creating Silverlight applications is possible without an IDE but I wouldn’t recommend it when you can get Visual Studio Express for free. Visual Studio provides you with a complete environment for creating, building and testing Silverlight and many other types of applications. Visual Studio 2010 supports Silverlight 3 out of the box. It also supports Silverlight 4 with an additional download.

Free: Visual Web Developer 2010 Express

A free trial version of Visual Studio 2010 Ultimate is also available (Visual Studio 2010 Ultimate has many more features than VS2010 Express)

Creating Deep Zoom Compositions

Free: Deep Zoom Composer

Image Stitching and Creating Panorama Images

Free: Microsoft Image Composite Editor

‘Deep Zoom’, by Andrew Fryer

Love it or hate it, you’ve had to have lived abroad or in a cave for the past 10 years to have missed Channel 4’s reality TV programme Big Brother. To help give the final series the send off it deserves, Shoothill have created a Silverlight Deep Zoom of past Big Brother housemates – zoom into the logo and find your favourite (or most hated!) character. Go on, you might not like Big Brother but if nothing else it’s a bit of mid-week fun to momentarily distract you from client demands

Using those 50+ pictures I’ve created a Deep Zoom montage using Deep Zoom Composer, including some pictures of the Microsoft BizSpark party and also a wall of tattoos since I was lucky enough to be shown some amazing examples! Thanks so much to everyone who allowed me to photograph them, I really enjoyed meeting you.

This post contains a simple example which I recreate in the video.

The video describes the fundamentals of how to create this type of experience using standard consumer photographic equipment (digital camera, tripod) and a free tool called Microsoft Image Composite Editor that stitches together the raw images and (optionally) generates a Deep Zoom Silverlight application.

The resulting application can be embedded on a web page. Importantly there’s no requirement to host in IIS or use ASP.NET, the Silverlight application can be hosted on pretty much any web server and any type of web page (HTML, PHP etc etc). This opens up the possibility to embed extremely rich content irrespective of the web stack or framework at the heart of your application.

I’ll start with this post in which I describe a Deep Zoom application that allows you to explore an overall image (some form of merchandise in the retail scenario) and embed regions of extremely high detail that can be explored. A typical example might be a jacket or a pair of jeans where you can roam around the item and seamlessly drill down into pocket / stitching / label details etc. The post contains a simple example which I recreate in the video.

The video describes the fundamentals of how to create this type of experience using standard consumer photographic equipment (digital camera, tripod) and a free tool called Deep Zoom Composer that allows you to combine the raw imagery and generate the Deep Zoom Silverlight application.

The resulting application can be embedded on a web page. Importantly there’s no requirement to host in IIS or use ASP.NET, the Silverlight application can be hosted on pretty much any web server and any type of web page (HTML, PHP etc etc). This opens up the possibility to embed extremely rich content irrespective of the web stack or framework at the heart of your application.

One improvement we could make then, would be to switch to using animations (which also dispenses with a chunk of code for the timer and a bit of maths). Rather than simply rotating, it might be nice if the carousel “snapped” to the next position. That effect could be further enhanced by using easing functions to accelerate / decelerate the rotation. I’ve also switched the opacity trigger to something much simpler. Just click on a panel to temporarily hide it. Each of these things is trivial to do in Silverlight – there’s almost no code behind this app – that’s the beauty of it. And the sky’s the limit.

I’ve used the same photo set as for the previous post (so again, I should have reduced the base image size). Given more screen real-estate, the images could of course be made larger. Or we could modify the carousel implementation to be more sparing with the space it requires. It wouldn’t be difficult to implement this.

One thing I haven’t tried (but I have a mind to) is to turn each panel into a Deep Zoom composition thereby combining the carousel with the “inspection” experience I talked about in previous posts. Now that would be something different!

Now to the how-tos where we’ll take a look at how to implement some of these concepts.

Here’s a very simple carousel showing my daughter’s latest acquisition. You can rotate the carousel by moving your mouse over the “Rotate” bar and adjust the opacity of the images in the foreground using the slider. The app uses the perspective 3D capability introduced in Silverlight 3 to give the illusion of 3D. In fact 2D elements (in this case the product images) are projected onto a surface in 3D space. It’s very basic and could certainly do with a bit of spicing-up design-wise but it gives you a general feel for what’s easily achievable with Silverlight. We’ll walk through building this app in a how-to.

The images I’ve used here were quickly snapped with my Canon 450D and could be reduced in size significantly for this app. They’re projected at 260×195 (max) while the image resources themselves are 800×533. A bit of pre-work on image reduction could have shaved 80-90% off the image download size. My bad but easily rectified for production

In my next (and final) post in the series, we’ll take a look at a slightly more sophisticated carousel that has some significant visual enhancements.