How To Create A Simple Deep Zoom Application In Less Than 5 Minutes With 5 Steps

The Deep Zoom technology by Microsoft is a part of Silverlight Rich Internet Application environment. It allows users to view collection of high resolution images in extreme close-up with advanced zoom and pan features.

This post shows how to build a sample application showing Deep Zoom’s capabilities. First of all download and install Deep Zoom Composer on your system along with Silverlight 2 Beta 1. You need Deep Zoom Composer to build the application and Silverlight 2 Beta 1 runtime to view it in a web browser.

Once you have installed Deep Zoom Composer, open it to start building your first sample application. Here are the steps to do it:

1. Click on “New Project” and give a name to your project. I have given the name as “Hide and Seek”

2. Click on “Add Image” in the “Import” section of Composer and the add the desired images for your project.

3. Go to “Compose” section and drag and drop the first image, that you want to choose as the background image, in the compose area. Select “Fit To Screen” in the “View” menu from the top menu bar.

4. Drag and drop other images on the background image and shrink them till the time you start seeing a pointer instead of the image. See the areas marked in red boxes in the image below for example.

5. Go to “Export” section, give a name, choose the export destination, select “Export as Composition” and “Export Images and Silverlight Project” and click “Export” to download the application that you built.

To view the application that you just built, open the exported folder, open the web output folder, and click on the HTML file in that folder. If you have installed Silver 2 Beta 1, the application will start in your browser and you can begin to play with it. Just start rolling your mouse wheel to zoom deep into the picture.

Here is the Hide and Seek application which I have built and it has the pictures of three locations hidden on the world map. Try finding the locations by zooming the picture with your mouse wheel and and tell us those three locations by leaving a comment.

Hint: Look at the image above with red boxes to see where the images are located within the picture.

Also check out Hard Rock Cafe which is using the advanced features of Deep Zoom to show off their Memorabilia.