Deep zoom composer helps mere mortals take advantage of the deep zoom capabilities in SilverLight 2. Obviously it has more detailed users for developers taking advantage of SilverLight 2, but it's fun for the average user too.

In testing the product I build a really simple deep zoom with two high resolution photos and the posted them to the Microsoft Windows Live PhotoZoom site. You could save them as SilverLight files if you wished to, but in this case I've chosen to publish them online and the link to them off a web page.

It all worked rather well, although there is a 4 billion pixel limit in the technology preview that did drive me a little insane! It meant resizing some pictures to get more than a single zoom function to work, which I did not enjoy. I would have preferred to have been able to resize the pictures within the tool rather than worry about using a 2nd tool to perform such a simple function.

In addition and preview function within the tool would also have been helpful, rather than having to export and see the result.

Regardless, the tool is quite intuitive and I produced a result quite quickly.

In order to follow the steps I've had provided below you will need:

  1. Two or three images of your own
  2. Deep Zoom Composer, which you can download at http://www.microsoft.com/downloads/details.aspx?FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&DisplayLang=en
  3. A Windows Live PhotoZoom account which can be created at http://photozoom.mslivelabs.com/
  4. SilverLight 2 installed in your browser, in order to test the outcomes. Although it is installed automatically when you access SilverLight 2 content, you may want to preinstall it by visiting http://www.microsoft.com/SILVERLIGHT/

Building a simple deep zoom

After all of these are installed, open Deep Zoom Composer and choose to create a new project.

You notice that you're presented with a blank page and a very basic toolbar at the top of the screen:

 

You want to Import some pictures first. Click add image on the far right of the toolbar and multi-select a few.

For the purposes of this blog I selected two.

Once they are imported, click Compose on the toolbar. This is the main area of the application and the place you will create your deep zooms.

In this example I have two photographs of Table Mountain in Cape Town, South Africa, that I will be using. My intention is to have the viewer zoom into the upper right of the mountain (where the cable car station is located) and then find a photograph located there that is a close-up of that area of the mountain.

The first step is simply to drag the first photo onto the canvas.

I dragged the image of the whole of Table Mountain onto the canvas, as pictured below)

 

At the bottom of the Deep Zoom Composer, another toolbar is visible. In this instance we will make use of the Arrow (to select), the Hand (to move the canvas around) and the Magnifying Glass (to zoom in on the picture).

In this instance I will zoom in on the upper right of Table Mountain, by selecting the magnifying glass and repeatedly zooming until I've achieve sufficient granularity to paste the next picture into a relevant location without it being immediately noticeable to the viewer when the image is zoomed out. Use the hand to move the picture around when zooming, if your target area moves off the canvas.

I think proceeded to drag the close-up picture into the zoomed in location, as pictured below. You'll notice I've taken the close-up picture and dragged it in the location of the cable car station on the upper right of the mountain. The picture in the background is the zoomed in version of the original picture of Table Mountain.

 

To see what how the initial result will appear to a user, click the Fit to Screen button, next to the magnifying glass.

In my example the picture appeared as below.

 

Believe it or not, you're good to go. We can now export the result.

Select Export on the toolbar.

In this example I'm publishing to the PhotoZoom website. In order to do that you must create an account before attempting to log in via Deep Zoom Composer. I will be creating a new album called Table Mountain.

Once logged into PhotoZoom, I filled out the new album name, "Table Mountain" and clicked Select Album Cover. The latter step is not entirely necessary, but helps to add further context to the content of the album.

I chose to leave the image format as JPG, but you can also use PNG (which is a lossless compression format). In my example my photos probably aren't worth using the extra storage, but I have left the JPEG quality at 95% anyway, which is pretty high.

 

All that's left to do is click, "Upload" and then view the results at Windows Live PhotoZoom.

I rather like the PhotoZoom site, because it provides an iframe link to allow one to insert their albums directly into their own web pages elsewhere. That functionality works exceptionally well, although I did find I needed to set the width and height manually on some pages to ensure that it worked properly on pages with DHTML layers.

 

Overall, and especially for a technology preview, this all works rather well. I'm so impressed, and it's a real wow factor thing to add to personal homepages and blogs :)

The end result is shown below. Zoom in on the upper right of the mountain, and eventually the next photo will appear in full resolution.