Using Deep Zoom Composer - Part I

25. September 2009 15:56

Silverlight  Comments

In my previous post I have shown how to use Seadragon / Deep Zoom with online application. But there is one limitation on this…..which really upsets me is that you can only use one image at a time. To overcome this Microsoft provides us with a tool known as Deep Zoom Composer. Using this tool is pretty simple, just some few easy steps and your Deep Zoom is ready in Seadragon or Deep Zoom composition. Here I will show how to use Deep Zoom composer step by step.
I am using an old version of Deep Zoom composer. Though there is much newer version of Microsoft Deep Zoom which you can download from here. Please be noticed of this that the newer version of Deep Zoom composer might promise you some new features, so there is a probability that the screenshots I have placed here may differs.

Step 1: Initial step is to collect all the high resolution images (not necessary actually, but recommended). When collected open Deep Zoom composer and create a new Project.

Step 2: Select project type from the new “New Project” window. As in the screenshot below you can see there is only one project type to choose from, but as I mentioned earlier that I have used an older version of Deep Zoom composer in this tutorial, you might tend to see some other new project types.

Step 3: Collect the high resolution images from your collection. Choose those images that you clicked from your digital camera, as the images clicked by digital cams are of high resolution and will give a good zoom effect. But if you don’t have a digital camera then go for the high resolution images or wallpapers that you can get from the internet. Here I have included the wallpapers from my vista wallpapers Collection. Click “Add Images” button just above the right pane as shown below in the screenshot.

Step 4: Select multiple images and click OK to start the import of images you selected.

Step 5: Once all the images are imported successfully click the “Compose” button situated at the top of the working area.

Step 6: Drag-n-Drop the images from the right pane showing all the images that you have imported. Select the image and resize it and place the images on the workspace where you want the images to show up when the composition is completed.

Step 7: You can also arrange the images in order to make them appear the way you want. For most of the users it seems to be a very simple function, but if you are a bit creative and understand the concept of Deep Zoom you can create an jaw-dropping composition. Though I will not be covering this option in this article but I will elaborate this option furthermore on my next post with an example. As with the options you are familiar as their name clears everything but just to give an idea you can place an image partially over each other and then set these options. (Don’t forget to check my forthcoming post on how do we use these options more brilliantly.

Step 8: Once you set all the images in the workspace, remember that you the way you are seeing your composition here it will be the same you will witness when you export your composition. In the left hand side there is a small zoom pane which helps you in position the workspace.

Once you finalize the layout of your composition then you can finally export you composition by clicking the “Export” button

Step 9: Now you have 2 export options that will allow you to have your composition either published on the PhotoZoom website (and yes of course, you need to have a windows live ID) or you can export your composition on your local drive.

Step 10: Now on the “Custom” tab you can choose the settings and export your compositions from the available options.

The custom export option allows you to have the Output Type which can be just Images, Silverlight Deep Zoom or Seadragon AJAX.

Step 11: Click the Export button and this is it…when the export is complete you can view your composition in the browser.

Step12: Aftet the export is complete then you can preview the composition in you browser.

Check out the working demo here.

Currently rated 5.0 by 1 person