Partager via

[Mini-Tutorial] Share Your Presentation in Deep Zoom

  • Article

imageOver 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).

    image

  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="     https://schemas.microsoft.com/client/2007"
        xmlns:x=" https://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. :)

Technorati Tags: Silverlight,Deep Zoom,Silverlight 2

Comments

  • Anonymous
    April 30, 2008
    This is a interesting idea. It would be cool to explore the DEEP aspect of deep zoom by placing your next slide within the current one and so on.

  • Anonymous
    May 07, 2008
    Quite a few people provided me feedback on my Deep Zoom post last month . With the help from Jamie Rodriguez's

  • Anonymous
    May 07, 2008
    Quite a few people provided me feedback on my Deep Zoom post last month . With the help from Jamie Rodriguez&#39;s

  • Anonymous
    May 22, 2008
    Qixing Zheng, una Evangelista de Dise&#241;o en Microsoft, ha creado una forma muy interesante de convertir

  • Anonymous
    June 30, 2008
    Thx for the article. It was helpful tome when writing Deep Zoom Obama. I do incorporated the "deep" feature of deep zoom by having several hi-res images hidden withing the main mosaic image. Check it out! http://www.deepzoomobama.com

  • Anonymous
    September 15, 2008
    Back in April Qixing wrote a post about how Deep Zoom could provide an innovative way to present slides.&#160;