Deep Zoom: Creating Working Application in Less than 5 Minutes Using the New Deep Zoom Composer

This post shows how to:

· Create working deep zoom application in less than 5 minutes*

· Upload a Silverlight 2 application to Silverlight Streaming – free hosting currently in Beta

---

· A good starting point if you want to create a set of image and share with your family or friends.

* including the time to download and install the Deep Zoom Composer (typically)

Deep Zoom Sample

Use mouse to move/zoom around.

 

 

Also see https://memorabilia.hardrock.com/ for a sample that rock & rolls.

Creating the Sample Above

Step 1: Install Deep Zoom Composer

https://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en

 

Step 2: Click New Project

Step 3: Click Add Image and add your images

Step 4: Click compose and arrange your collection

 

 

Step 5: Click Export, name your project (e.g. DeepZoomFirstTry) and Export

Step 6: Click “view in browser”

 

You’re done!

Hosting on Silverlight Streaming

Step 1: Apply for account on https://streaming.live.com. Direct link: https://silverlight.live.com/account/create.aspx

 

Step 2: Prepare your application for upload

· Find the ClientBin folder where Deep Zoom composer output the working application

The ClientBin should contain a .xap file and GeneratedFiles folder

· Create manifest.xml that looks like the one below and place it in the ClientBin folder

<SilverlightApp>

  <version>2.0</version>

  <source>DeepZoomOutput.xap</source>

  <width>720</width>

  <height>540</height>

  <background>gray</background>

  <isWindowless>false</isWindowless>

</SilverlightApp>

 

                Remember to replace the name of the .xap file in the manifest with your .xap file’s name.

 

Step 3: Zip the contents of ClientBin and upload them to Silverlight Streaming

Step 4: Embed your application somewhere

Copy the iframe html into your page/blog suggested from the Silverlight streaming web site after uploading the application. It looks something like this:

<IFRAME style="WIDTH: 720px; HEIGHT: 540px" src="https://silverlight.services.live.com/invoke/61093/DeepZoomFirstTry/iframe.html" frameBorder=0 scrolling=no mce_src="https://silverlight.services.live.com/invoke/61093/DeepZoomFirstTry/iframe.html"></IFRAME>

 

 

compose.JPG