Creating a Deep Zoom Image

To begin creating your own Deep Zoom image, download and install the Deep Zoom Composer from Microsoft.com at http://bit.ly/hwf8Wp.

The Deep Zoom Composer has a built-in user guide. To view it, within Deep Zoom Composer press F1, or select the User Guide menu item from the Help menu. The user guide provides a good overview of using the tool, as well as some more advanced concepts that are not covered here, such as creating panoramic images and image hotspots.

In the example for this chapter, I created a Deep Zoom image composed of two images: a wide shot, and a zoomed in close-up. To do this, I created a new project (select File, New Project) within Deep Zoom Composer. I then used the Add Image button, located on the Import tab, to insert the images.

Composing the Deep Zoom image involved resizing and positioning the close-up shot, so that it blended into to the wide shot (see Figure 7.9).

FIGURE 7.9 Composing a Deep Zoom image within Deep Zoom Composer.

When I was happy with the composition, I switched to the Export tab.

Various options exist for outputting the Deep Zoom image. For hosting on your own website, select the Silverlight Deep Zoom option button. The generated output includes Visual Studio projects that you probably will not need, so select an output location that is independent from your Windows Phone app (see Figure 7.10).

FIGURE 7.10 Exporting a Deep Zoom image from Deep Zoom Composer.

When the exporting process is complete, the Deep Zoom image files are located at DeepZoomProjectSiteClientBinGeneratedImages in the output directory. This directory can be placed in a web application that will be accessible to your Windows Phone app.

The filename of the generated Deep Zoom image, and to which you point the MultiScaleImage, is dzc_output.xml. It contains references to other image definition files in subdirectories, along with image metadata.