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

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

Deep Zoom Sample

Use mouse to move/zoom around.

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

Creating the Sample Above

Step 1: Install Deep Zoom Composer

http://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 http://streaming.live.com. Direct link: http://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="http://silverlight.services.live.com/invoke/61093/DeepZoomFirstTry/iframe.html" frameBorder=0 scrolling=no mce_src="http://silverlight.services.live.com/invoke/61093/DeepZoomFirstTry/iframe.html"></IFRAME>

Published Wednesday, May 07, 2008 4:42 AM by nikola