[Mini-Tutorial] Share Your Presentation in Deep Zoom

Over the past several months, I went to many colleges and universities to talk about user experience related topics from Microsoft. After each presentation, students asked me to share my presentation online. I've been using Skydrive to share my large files such as ppt, audio, and video files with the public. Although Skydrive is very convenient, users still need to download the entire presentation and then open it in pdf or Office PowerPoint to just get a quick interview or look at couple of slides in the presentation. As I was playing around to create my first Deep Zoom demo, I had an idea - why not creating a presentation visualization that allows users to view the presentation right here: on a web page or a blog post. I know many people use SlideShare to show PowerPoint Presentations online, but I'm thinking about a new way to view ppt slides. With the power of Deep Zoom, I'm able to embed my entire presentation in small space (500x400 pixels).

You view it in action here. Make sure you have Silverlight 2 Beta installed to view the Deep Zoom demo. The major steps I went through to create this online experience are:

1. Convert a ppt presentation into a collection of images: File -> Save As -> Other Formats -> Save as type PNG in PowerPoint 2007. Each slide will save as a PNG image.
2. Launch Deep Zoom Composer: import all images from Step1 -> Compose the layout of your slides on canvas -> Export project (uncheck "Create Collection" if you want to have all images in one Deep Zoom control).

   

3. Create a Silverlight project in Visual Studio 2008 -> compile the empty project to create ProjectName.xap in ClientBin -> add exported folder from Step2 into the ClientBin folder. Mike Taulty has a great post that goes into a lot more detail for this step.
4. Add the Deep Zoom control, which is called "MultiScaleImage", into Page.xaml. Your Page.xaml should look something like this:

   <UserControl x:Class="DeepZoom.Page"
       xmlns="http://schemas.microsoft.com/client/2007"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Width="500" Height="400">
       <Grid x:Name="LayoutRoot" Background="White">
       <MultiScaleImage Source="presentationdeepzoom/info.bin" x:Name="deepZoom" />
     </Grid>
   </UserControl>

5. Add interaction for Zoom in/out. I used mouse wheel events for zoom in and out. You can also program to use certain keys to zoom in and out. I didn't bother to code for this demo and basically borrowed Mike Harsh's Deep Zoom demo code presented at MIX and switched with my images.

   For you designers out there, you can quickly tested out the Deep Zoom idea by skipping step 4 and 5. All you need to do is, download my project source code, open it in Visual Studio 2008, and change two things. One is updating the "Source" in <MultiScaleImage Source="presentationdeepzoom/info.bin" x:Name="deepZoom" /> with your export folder name. The other thing is to replace the "presentationdeepzoom" folder in ClientBin with your export folder.

6. Upload your Deep Zoom demo onto Silverlight Streaming following couple of easy steps in Tim Sneath's blog post.

Congratulations! Now you have your presentation in Deep Zoom live and ready to impress your friends. :)