Taking the first steps in using Deep Zoom

Microsoft unveiled Silverlight 2 at its MIX08 event in Las Vegas, along with the built-in Deep Zoom. Based on the Seadragon image-browsing software that’s been used to deliver the 3D Photosynth image service (and has had a starring role in CSI), Deep Zoom is designed to make it easier to work with large images or large collections of images. You can use it to build sites that can explore huge multimegapixel images or zoom through vast places, such as a museum.

You may only need one line of code to put a Deep Zoom onto a page, but creating the image can be a lot harder. You need to assemble the images, turn them into a tree of differently scaled tiles and then build the XML map that reassembles them into a smoothly scrolling zoom. Luckily, Microsoft has produced a tool to do all the heavy lifting for you (even building the Silverlight code) in the shape of its Deep Zoom Composer.

01 Download the Composer

Start by downloading the Deep Zoom Composer from the Expression Blend and Design blog (http://blogs.msdn.com/expression/default.aspx). The first version only produced the image tree, but the latest build now outputs Silverlight code as well, just to get you started.

02 Install the Composer

Installation is easy – just click on the MSI file that comes from Microsoft. You’ll need a fairly hefty graphics card and an up-to-date installation of Windows XP or Windows Vista to get the most out of Deep Zoom Composer, as it’s written using the Windows Presentation Foundation.

03 Introducing the Composer

Building a Deep Zoom takes just three steps – importing the images you want to use, composing the zoom and finally, building and exporting the zoom tiles. The start screen lets you define new projects and open existing ones for additional design and editing.

04 Adding images

We first need to add images to our zoom. We’d recommend sketching out the layout you’re planning to build first. There are plenty of options for handling either one massive multipixel image or a single exploreable gallery, as well as producing more complex applications.

05 Working with large images

Loading a large image into Deep Zoom Composer can take some time. Here, we’re loading a 50-megapixel image of the view from Zabriskie Point in Death Valley, which we’re planning to use as the jumping-off point for a Deep Zoom-based tour of the valley.

06 Deep Zoom photo gallery

Once you’ve imported the images, you’ll be presented with a gallery. Scroll down the image bar to the right to pick an image. Right-clicking on an image lets you delete it from the project, while two buttons on the main image window page scroll through the files you’ve chosen.

07 Starting the composition

Switch to the Compose window. The gallery has an additional layer view where you can work with the Z-order of the images you’ve loaded onto the composition space. You can explore the Compose space as if it was a Deep Zoom image and add images at different zoom levels.

08 Adding your first image

Drag an image from the gallery onto the page. You can use your mouse’s scroll wheel to set an initial zoom level. We’ve used our Death Valley panorama as the initial image, as it’s a large image that supports quite a high level of zoom. Centre the image on the Compose window.

09 Composing several images

A zoom can have many images at different sizes in a single view. We can add more images from the gallery and use the Resize tools to give them an appropriate size. While Deep Zoom Composer comes with basic layout tools, you can use the resizing guides to help lay out your images.